My web page is like the following:
<div id=id1 class=stuff>
TEXT, FORMS, and STUFF
</div>
<div id=id2 class=stuff style=display:none>
TEXT, FORMS, and STUFF
</div>
<div id=id3 class=stuff style=display:none>
TEXT, FORMS, and STUFF
</div>
<a id=btn1>DD</a>
<a id=btn2>DD</a>
<a id=btn3>DD</a>
Under this I have jQuery click events which set the display of the clicked item to inherit and the others to none.
$(#btn2).click(function (e) {
$(#id1).css('display','none');
$(#id3).css('display','none');
$(#id2).css('display','inherit');
});
The showing and hiding works correctly however I do notice that some things in the initially hidden divs do not render correctly, especially the elements that get manipulated by CSS. Essentially when the page loads the hidden divs do not correctly get rendered and when they are shown things look ugly. What is the way to properly do this?
EDIT::::::::::::::::::::::::::::::::::::::::::::::
What I ended up doing is setting all of the initially hidden divs to visibility: none, then in the pages onLoad() event setting the display: none. When I toggle I change both the visibility and display. Everything renders correctly and because things are statically set to not visible there is no ugly 2 seconds where all the divs show.