Tabbed Content


release v 2013.7.6
Lots of content? Little space? Tabbed Content comes to the rescue.

This Javascript component lets you easily create tabbed content. All you need is "ul li" elements and a couple of related content divs.

Templates:
  • Free  to use
     
  • 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) Cross browser tabbed content

  • 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>
Done. That's it.

If you need more features:

We have an advanced version, McTabs - jQuery Tabs, that is the most feature-rich Tabs.

  • Ajax content
  • Smooth transitional effect
  • Auto advance
  • Bookmark support: select a tab via bookmark anchor
  • URL support: a hash id in the URL can select a tab
  • Select tabs by mouse over
  • ... and more

Click on the Download button at the top of the page. It contains the source code, templates and a demo page of the Tab Content UI component.


Ask Question

Question Title:
Your name:
+ =    
  • If your question is for troubleshooting, please read Troubleshooting Request before posting.
  • A title with good keywords will help others. Please make your title specific and on-topic
  • Questions related to styles(CSS) may not be answered

more ...