Hi,

I am wondering what the best solution would be to achieve the
following:

Normal situation (simplified):
<ul>
 <li>Tab1</li>
 <li>Tab2</li>
 <li>Tab3</li>
 <li>Tab4</li>
</ul>
<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
<div id="tab4">...</div>

When a tab is selected the corresponding div slides in to view.
This all works nicely.

Now in the CMS I'm using (TYPO3), I configured the tabs to be only
displayed if content is actually related to it. For the div's this
would mean modifying the extension to such a degree that I don't like
to do it that way. I'd prefer hiding the div of the missing tab(s).

The ideal situation would become:
<ul>
 <li>Tab1</li>
 <li>Tab2</li>
 <li>Tab4</li>
</ul>
<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3" style="display:none">...</div>
<div id="tab4">...</div>

What would be the best way to do this using jQuery?

Thanks for your input!

Henjo

Reply via email to