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);
            });

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;
}

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();});

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();

Also tried this but no luck:


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

Any ideas?

Thanks.

Posted June 13th, 2007 at 12:55pm by

Login or Register to Post