simplyTabs

Presentation

simplyTabs is a jquery plugin that creates a tabbed interface out of a list of in-page anchors. The script is quite robust: if the anchor's target element does not exist, that specific tab is not created.

In order to achieve the "tabbification", the plugin simply uses css classes, so that you should only need basic CSS skills to tweak the plugin to your liking . A simple stylesheet is included so that you have something to start from.

How to set it up

  1. HTML Markup

    Your markup should have a container inside which the tabs will be looked for and created.

    Inside this container, define your tabs with an id (ex: "tab1" or "introduction"): each tab can be an LI, a P or a DIV tag, it shouldn't matter, as long as it is semantically relevant to the nature of your content. You can style it afterwards using CSS to suit your graphical taste.

    However, it is important that you include a tab navigation menu, in the form of self-page anchor links, where each link points to a tab element via its id (ex: <a href="#introduction">tab label</a>) . If it does not exist, the tab will simply not be created.

    Here is an example

    
    
        <div id="tabContainer">
            <ul id="anchorlinks">
                <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>This will not be a tab</li>
            </ul>
            <div id="tab1">
                This is the first tab...</div>
            <div id="tab2">
                This is the second tab...</div>
            <div id="tab3">
                This is the third tab...</div>
        </div>
        
  2. The CSS

    You control the look of your tabs entirely via your stylesheet. A sample stylesheet is provided to get you going. Basically, it allows you to control the look and dimensions of the tabs, the look and position of the tab menu. I feel that's the best way to make this plugin very versatile.

  3. the javascript

    You simply call the plugin inside your document.ready function, like this:

    
      <script type="text/javascript">
            $(function()
            {
                $("#tabbedTextContent").simplyTabs({ onShow: function()
                {
                    //this callback displays the img title as image legend
                    var caption = $(this.hash +" img").eq(0).attr("title");
                    $("#imageLegend").text(caption);
                }
                });
            });
        </script>
    
  4. Options

    Most of the options are just a way for you to change the class names that the plugin uses. IF you do change them, make sure you reflect those changes in your CSS!

    tabsNavMenuSelector
    class of the menu to be used for the tabs detection & navigation (default : 'ul.tabsNavMenu' )
    tabsNavMenuClass
    class given to the tabs navigation menu (default: 'tab-menu')
    tabsPanelClass
    class given to the tab panels (default: 'tab-panel')
    tabsNavMenuItemClass
    class given to the menu items anchor elements (default: 'tab-menu-item')
    visibleTabClass
    class given to the active tab (default: 'tab-visible')
    invisibleTabClass
    class given to the inactive tabs ( default: 'tab-hidden')
    selectedTab
    tab selected on launch - 0-based, according to the anchor order in the html markup. (default: 0 (first tab))
    selectedTabClass
    class given to the active tab (default: 'tab-menu-item-selected')
    onShow
    callback function triggered after a tab is displayed (default: null)

Download

Like this script? Learned something? Feel free to send me a coin via paypal:

As i do not have much free time, donations will motivate the script improvement and documentation. Thanks much!

Download simplyTabs in the dedicated jquery plugin project page.

Changelog

R2(12 November 2009): plugin now works for multiple tabs on the same page (Thanks johnb !)

R1(4 March 2009): initial release

Thanks!!

My lifetime gratitude to John Resig and the team behind jQuery: if Heaven does not exist, it should be built right for these guys. And maybe we should actually ask the JQuery team to build it for all of humanity !

Demo

demo is here

to-do list

Need help? Can't get it working? Found a bug?

Please use the dedicated project page on the jquery plugin repository.