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