YUI: Tabview

The second component that is worth mentioning out of YUI's library is Tabview. Tabview is a quick and easy code addition that can give you the ability to provide a wide variety of content to the user all on a single page without the page getting unnecessarly too long. What tabview does is shows your content in "tabs", which are like content boxes stacked on top of each other, with the little tab sticking out the top to let you know what is in that particular box. Think of it as looking into a filing cabinet. A filing cabinet is filled with tons of those folders that have the little tab sticking out the top where you write what is in the folder. Its the same concept. Each tab on top is a link that, instead of taking you to a new page, it swaps out the current content with the new content that is linked to that tab you just clicked.

You have multiple choices in how to render this component onto your page. You can make the setup yourself using a format of the following:

      <div id="tabview">
         <ul>
             <li><a href="#foo">foo</a></li>
             <li><a href="#bar">bar</a></li>
             <li><a href="#baz">baz</a></li>
         </ul>
         <div>
             <div id="foo">foo content</div>
             <div id="bar">bar content</div>
             <div id="baz">baz content</div>
         </div>
    </div>

By passing the id of the wrapping div (in this case "tabview") to the tabview instance, it will automatically add the class names and .js to this markup, and after a little css (whether you choose to write the css yourself or import YUI's skin sam css), your tabview widget will be up and running on your site, ready for you to populate. For more info on different strategies and more documentation, visit the tabview site.

http://yuilibrary.com/yui/docs/tabview/