Need help with Tab Styling

I’m hoping someone will be able to solve this strange glitch that suddenly appeared with some tabs I have.

Here is a read-only link to the site. Please go to Pages and under Resources, go to the page Financial Calculators.

https://preview.webflow.com/preview/j-ray-cpa?preview=a4eff3e4996eaac0e10d7d760be7e6e6

You will see that I have the tab selectors which are certain financial calculators, and then the tab pane will display the particular calculators you’ve selected. This all worked perfectly fine and then I launched the site.

However, I recently took a look at the page and found that ALL the tab panes are displaying by default; there is no way to select only a specific one or to make them go away. I haven’t even touched the code on this page – it’s like it glitched all by itself! Now no matter what I do to try and tweak the code, I can’t get it to function like how it used to!

Does anyone know how and why this happened – and, more importantly, does anyone know how to fix this??

Thank you!

EDIT

I just realized that the actual financial calculators are displayed as an HTML embed… so I’m not sure if they will even show up within the Webflow designer.

But you may be able to see that the tab pane section takes up a height that stretches far down to the bottom of the page; if it was working properly, this section’s height would be much, much shorter since it should only be displaying a few calculators at a time, rather than all of them at once.

You can see the live page here: Financial Calculators

Your tab-pane class has a display:block. Remove it.

Wow… I swear I tried that previously – but it looks like that did the trick!

Thank you so much for your help @samliew

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.