Tabbed Content

• Free  to use (including commercial)

• Javascript (packed 3KB) driven. Search engine friendly.

• On DOM ready

  Start the tab content on DomContentLoaded instead of window.onload.

• Persistence

  You can optionally choose if the most recently clicked tab will be remembered during your navigation.

• Default Tab

  You can specify which tab should be shown by default when the page loads.

• Multiple Tab Contents

  Support multiple Tab Contents on the same page, with only one copy of the CSS and Javascript files.

• Valid HTML/HTML5 markup

  Wide browser support (including IE 6)

• Download the source code by clicking the Download button at the top of this page, and put the downloaded tabcontent.js file and one of the template folders into your web application.
• Insert the tabcontent.js and tabcontent.css links into the head section of your page <link href="tab-content/template1/tabcontent.css" rel="stylesheet" type="text/css" /> <script src="tab-content/tabcontent.js" type="text/javascript"></script>
• Add the tabs HTML and contents HTML to your page: <ul class="tabs"> <li><a href="#view1">Features</a></li> <li><a href="#view2">How to Use</a></li> <li><a href="#view3">Source Code</a></li> </ul> <div class="tabcontents"> <div id="view1"> content 1 </div> <div id="view2"> content 2 </div> <div id="view3"> content 3 </div> </div>
• Set Persistence (optional)

  Add data-persist="true" to the root UL element:

  <ul class="tabs" data-persist="true">

  It will turn on the persistence feature: the most recently clicked tab will be remembered even if the page is reloaded or revisited within the browser session.

• Set Default Tab (optional)

  By default the first tab will be selected when the page is loaded. To override this, set class="selected" to the tab (LI element) that should be shown:

  <li class="selected">Tab 3</li>

If you expect a more feature-rich version of the tabber, you can use the advanced version of the script, Responsive Tabs (jQuery Tabs):

• URL support: a hash id in the URL can select a tab
• Bookmark support: select a tab via bookmark anchor
• Select tabs by mouse over
• Auto advance
• Smooth transitional effect
• Content can retrieved from other documents or pages through Ajax
• ... and more

Clicking the download button above and you will get the package that contains the source code, templates and a demo page of the Tab Content UI component.