Bookmark to del.icio.us
FF1+ IE5+ Opr7+
Tab Content Script
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.
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.
Step 1: Insert the below CSS and script into the HEAD section of your page:
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:
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.
Be sure to set the persistence feature to either "sitewide" or "local" in the above.
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:
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:
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:
Recent change log