1.6.0 - Hide Tab Content in CSS

I'm using Control.Tabs to provide a full screen tab interface on an AJAX application but am having a problem when the page first loads. All the tab content is visible for a fraction of a second before the following (simplified) code executes.

$$('.tabs').each(function(tabs){  
                new Control.Tabs(tabs);  
            });  

$$('.tabs').each(function(tabs){
                new Control.Tabs(tabs);
            });

I tried to specify the following in my CSS to hide the tab content from the start but the activated tab, specified by #tabid, didn't appear on page load.

.tabcontent{  
    display: none;  
}  

.tabcontent{
    display: none;
}

I added the following code after the JS above to try to undo the CSS when the page finishes loaded:

$$('.tabcontent').each(function(s){s.show();});  

$$('.tabcontent').each(function(s){s.show();});

This still didn't allowed the tab to appear but, as I soon worked out, would have caused all of the tabs to appear at once!

I modified the afterChange function to save the ID of the current tab to a global variable and set the following to run at the end of page load. Still no luck.

$(szCurrentTab).show();  

$(szCurrentTab).show();

Also tried this but no luck:

Control.Tabs.findByTabId(szCurrentTab).activeContainer.show();  

Control.Tabs.findByTabId(szCurrentTab).activeContainer.show();

Any ideas?

Thanks.

Posted June 13th, 2007 at 12:56pm by niai

The best way I have found when this is a requirement is to attach a style or class name that will hide the containers to all but the first container. Ugly, but it works.

Posted June 13th, 2007 at 1:21pm by ryan