hiding div's based on dynamic tabs

hiding div's based on dynamic tabs

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