Tabbed Content Areas

From Web Developer Network Wiki
Jump to: navigation, search

Contents

Tabbed Content Areas for Templates 3.0 (2009)

The 2009 templates have CSS and JavaScript built into the template files for tabbed content area. In order to implement this element, the following HTML markup is needed:

<ul class="wdn_tabs">
    <li><a href="#tab1">Tab #1</a></li>
    <li><a href="#tab2">Tab #2</a></li>
    <li><a href="#tab3">Tab #3</a></li>
    <li><a href="#tab4">Tab #4</a></li>
</ul>
<div class="wdn_tabs_content">
    <div id="tab1">Content area for tab 1</div>
    <div id="tab2">Content area for tab 2</div>
    <div id="tab3">Content area for tab 3</div>
    <div id="tab4">Content area for tab 4</div>
</div>

The 'href' value in tab links must be the same as the 'id' value for each content section.

Selecting a default tab

By default, the first tab will be selected and the assigned content displayed for this tab. If you would like a different tab (for instance, the 3rd tab) to be the default, simply add the following class the <li> of the tab:

class="selected"
  • Note: Even if a default tab is indicated with the above method, if the #hash tag is present in the URL, the tab indicated by this #hash tag will overwrite the selected default tab.

Using Only the Styles

If you would like to use the tab styles, but not the JavaScript interaction supplied by default, then add the following class to the <ul> tag:

class="disableSwitching"

Sub-Tabs

<ul class="wdn_tabs">
    <li><a href="#tab1a">Tab #1</a>
        <ul>
            <li><a href="#tab1a">Tab #1a</a></li>
            <li><a href="#tab1b">Tab #1b</a></li>
            <li><a href="#tab1c">Tab #1c</a></li>
            <li><a href="#tab1d">Tab #1d</a></li>
        </ul>
    </li>
    <li><a href="#tab2">Tab #2</a></li>
    <li><a href="#tab3">Tab #3</a></li>
    <li><a href="#tab4">Tab #4</a></li>
</ul>
<div class="wdn_tabs_content">
    <div id="tab1a">Content area for tab 1a</div>
    <div id="tab1b">Content area for tab 1b</div>
    <div id="tab1c">Content area for tab 1c</div>
    <div id="tab1d">Content area for tab 1d</div>
    <div id="tab2">Content area for tab 2</div>
    <div id="tab3">Content area for tab 3</div>
    <div id="tab4">Content area for tab 4</div>
</div>

Tabbed Content Areas in Template 2.0 (2006) (deprecated)

This method has been deprecated and is no longer supported. For information on this method, visit the history of this wiki article.

Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox