New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

Tab Content Script

Author: Dynamic Drive

Note: Updated Feb 18th, 05'. Persistence can now either be "sitewide" or "local."

Description: We got our inspiration for this script from Yahoo's frontpage, which uses something similar to organize its search tools. Tab Content Script is a standards compliant, 2 level content script. Click on a tab, and additional content appears beneath it while contracting any previously open content. The script uses CSS to control all of its appearance, and lets you enter plain HTML for the tab contents, making customization a breeze.

  • Standards compliant, with all visual aspects of the script controlled via a central CSS definition.
  • Both tabs and content defined using plain HTML, making customization a breeze.
  • Due to 2) above, entire script search engine friendly and crawl-able.
  • Easily set which tab and content should initially be shown when the page first loads.
  • Customize the color of each tab easily, simply by inputting an optional HTML attribute theme="colorname" within the desired tab's HTML tag.
  • Optional code that instantly adds persistence to the tabs. With it present, going to another page or reloading browser won't cause the selected tab to be reset upon returning. (session only persistence). New! Persistence can now be either "sitewide" or "local." With the former, the tab content order is remembered across your entire site when you have multiple pages (within same domain) that all use this script.
  • Script works in IE5+ and NS6+, degrading well with the rest. Lower browsers will simply see the tabs and content all at once.

Sweet!

Demo (tab persistence enabled. Try reloading page):

Visit Dynamic Drive for free, award winning DHTML scripts for your site:
Visit our What's New section to see recently added scripts to our archive.
Visit our Hot section for a list of DD scripts that are popular to the visitors.

Search Dynamic Drive:


Directions Developer's View

Step 1: Insert the below CSS and script into the HEAD section of your page:

Select All

The CSS above allows you to control all visual aspects of the tabs and content in one central location. A variable within the DHTML script also lets you specify which tab and content should be initially selected when the page loads.

Step 2: Add the below HTML to where you wish the Tab Content to appear on the page:

Select All

Optional tabs persistence feature add-on

If you wish the script to remember the last selected tab when the page is reloaded or returned to within a browser session, simply add the below script following the code of Step 1. We designed this persistence script to be completely modular in nature- you can add/remove the below script at will to enable/disable the persistence, respectively.

Select All

Be sure to set the persistence feature to either "sitewide" or "local" in the above.

More information

The code of Step 2 contains the plain HTML that will render the Tab Content. Structurally it is broken up into two parts:

1) The tabs:

<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">What's New</a></li>
</ul>

Each tab is implemented as a list item (<li>). To add more tabs, just add additional <li> items, but all contained with the master <ul> tag. The code in red is the optional "theme" attribute, which you can add within any tab link to give it a different theme color than that of the default, controlled by the CSS in code of Step 1.

2) The tab contents:

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
"
</div>

<div id="sc2" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.
"
</div>

</DIV>

There exists a master DIV here (with ID="tabcontentcontainer"). All of your tab contents need to fall within this div. As shown, each tab content should also be wrapped inside its own DIV tag (ID="scx", class="tabcontent"). For each content you add, be sure to increment the ID attribute, such as "sc1", "sc2", "sc3" etc. This is the ID you'll use to pass into the menu tabs in 1) to determine which tab displays which content.

Adding a line break between tabs

if you have lots of tab links, you can get them to appear on separate lines, by adding a divider:

<ul id="tablist">
<li><a href="#" onMouseover...>Google</a></li>
<li><a href="#" onMouseover...>Yahoo</a></li>
<li><a href="#" onMouseover...>MSN</a></li>
<div style="margin-bottom: 8px"></div>
<li><a href="#" onMouseover...>News.com</a></li>
<li><a href="#" onMouseover...>Dynamic Drive</a></li>
</ul>

Recent change log

  • Updated Feb 18th, 05. Enhanced persistence feature with "sitewide" or "local" settings.
  • Updated Sept 27th, 04 for optional persistence feature.