To view the source of this page, right click (Mac users control+click) in this frame and select "View Source" or "This Frame"->"View Source".

# Tab Panel Examples

Note that the js and css is not minified so it is readable. See tabs-example.js for the tab creation code and tabs-example.css for the css.

### Tabs without fixed height that resize to the content. Built from existing markup.

Here's my script:

    var tabs = new YAHOO.ext.TabPanel('tabs1');
    tabs.addTab('script', "View Script");
    tabs.addTab('markup', "View Markup");
    tabs.activate('script');

    <div id="tabs1">
        <div id="script" class="tab-content">
            (Content goes here)
        </div>
        <div id="markup" class="tab-content">
            (Content goes here)
        </div>
    </div>

### Tabs with fixed height that scroll the content. Built entirely with javascript.

- Tab 1 is a normal tab with content passed when adding it.
- Tab 2 is loaded via Ajax. It was set up using the standard UpdateManager functionality. It reloads it's content every time it's activated.
- Tab 3 is loaded via Ajax too. It was set up using setUrl() a convenience method that will do everything done on tab 2 and also has the ability to set it to load only once.
- Tab 4 has an event listener attached.
- Tab 5 is disabled.