If you haven't checked out yui, I strongly suggest you do. A fantastic ready to go library of AJAX wonder. Simply include the js and/or css files you need for the function you want and follow the great documentation in implementing it into your website. http://developer.yahoo.com/yui/
I had some trouble implementing yui's TabView. Look at the basis of TabView below.
<div id="menu" class="yui-navset"> <ul class="yui-nav"> <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li> <li><a href="#tab2"><em>Tab Two Label</em></a></li> <li><a href="#tab3"><em>Tab Three Label</em></a></li> </ul> <div class="yui-content"> <div><p>Tab One Content</p></div> <div><p>Tab Two Content</p></div> <div><p>Tab Three Content</p></div> </div> </div>
The problem I had was putting the tab labels into the header div and the the content into the place I wanted it in the body div. The problem was when I closed the header div, the div with id "menu" would then be closed and that was the end of the TabView; the contents would all show at once. Finally, I figured out that you simply wrap the header as well, into the menu div block. See below:
<div id="menu" class="yui-navset"> <div id="header"> <img src="header graphic.jpg"> <h1>Some text maybe</h1> <ul class="yui-nav"> <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li> <li><a href="#tab2"><em>Tab Two Label</em></a></li> <li><a href="#tab3"><em>Tab Three Label</em></a></li> </ul> </div> <!-- Close header, but menu still open --> <div class="yui-content"> <div><p>Tab One Content</p></div> <div><p>Tab Two Content</p></div> <div><p>Tab Three Content</p></div> </div> </div> <!-- now close menu -->
So simple, but had me going for a little bit. Damn yui is so sweet!!