SUBSCRIBE VIA RSS


Subscribe to our feed

Symfony Experts

Symfony Experts
If you have an urgent question for a symfony-related issue, this is the place to ask.

Topics

Stack Overflow


The old fashioned way

RECENT TUNES

CodeStereotabs: Tabs with Prototype and Scriptaculous

Features

Stereotabs is a small and lightweight script that allows you to easily add interactive tabs to your web pages. Very much inspired by Kevin Miller's Accordion script, this bit of code makes creating an smooth tabbed interface easy.

  • Unobtrusive » All behaviors are added after page load and don't muck up your html. Visitors without javascript will see all of your content.
  • Simple » You can add it to your existing pages quickly with just a few lines.
  • Small » Uncompressed the source is 82 lines long. 2k!
  • It Remembers » Your tabs are actually links to page anchors. Reload the page and the same tab will remain active.

Setup

Download the code.
Stereotabs requires prototype.js and effects.js (part of the scriptaculous library). If you don't want the fade-in / fade-out effect, you can do without effects.js

Include the source files.


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/stereotabs.js"></script>
    

Initialize the tabs.


<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', loadTabs, false);
function loadTabs() {
var tabs = new tabset('container'); // name of div to crawl for tabs and panels
tabs.autoActivate($('tab_first')); // name of tab to auto-select if none exists in the url
}
//]]>
</script>
    

Create your tabs.
Stereotabs will crawl the DOM element you specify for elements that contain the "tab" class and "panel" class (you can specify class names if you wish). It then uses these elements' ID tags to know which element to display when each tab is clicked. Here is a simple example. Notice each tab has the class "tab" and each tab content has the class name "panel". Also not that the IDs of the tabs match up with the IDs of the tab content.


<div id="container">
<ul id="tabnav">
  <li><a href="#first" id="tab_first" class="tab">Tab One</a></li>
  <li><a href="#second" id="tab_second" class="tab">Tab Two</a></li>
  <li><a href="#third" id="tab_third" class="tab">Tab Three</a></li>
</ul>
<div id="panel_first" class="panel">
  Here is the content for the first tab.
</div>
<div id="panel_second" class="panel">
  Here is the content for the second tab.
</div>
<div id="panel_third" class="panel">
  Here is the content for the third tab.
</div>     
</div>
        

Configuration

You can create a tab set and pass it a few options to customize it to your current page structure. By default, the code will search for tabs by using the class name "tab", and tab content using the class name "panel". It also will apply the class name "selected" to the currently selected tab.

You may also have noticed that the id attributes for the tags and tag content started with either "tab_" or "panel_". This is a way to link a tab with its specific content while still keeping the ids unique. You can change these in the configuration as well.

Finally, if you wanted, you can turn off the fade effect, and also change the event that triggers the tab activation.

Below is an example of how you can pass options to your tab set.


var tabs = new tabset('container', {
classNames: {
  tab:        'tab',      // class name used to identify the tabs
  panel:      'panel',    // class name used to identify the tab content
  tabActive:  'selected'  // class name added to the active tab
},                        
ids: {                    
  tab:        'tab_',     // what to strip off the tab id to get the tab name
  panel:      'panel_'    // what to strip off the tab content id to get the tab name
},                        
onEvent:      'click',    // perhaps you want to activate on mouseover? not recommended
effects:      true        // set this to false if you do not want to include effects.js
});
          

Download

New version works with FF3 and Prototype 1.6! Download the new version of stereotabs 1.6.

Download the old version for Prototype 1.5 (won't work with Firefox 3) here. Or, if you just want the source and not the whole archive, you can view stereotabs.js.

107 Responses to Stereotabs: Tabs with Prototype and Scriptaculous

  1. Clever bit of coding. I was wondering the same thing as a previous commenter. This is so cool. I’m wondering whether this stereotabs can be integrated with velocity menu

    I’ll skim back over in cased I missed it

  2. Austin says:

    I have one question: I tried to add the ‘display:none;’ to the ‘.panel’ style (from a comment toward the beginning) to eliminate the flash of content while the page loads, but for some reason the panels don’t come back when you click on the links.

    Is there something else I need to add to the js to get them to reappear?

  3. Pingback: Blogawker Best Tabs for Word Press - Blogawker

  4. Rich Hamond says:

    I’m having an issue where my content for one set of tabs isn’t appearing when the page loads. I’m currently using two stereotabs within the same page. The first set of tabs/links is used to reveal a sub set of tabs/links. The seconds set then is used to reveal the content. The content for the sub set is not appearing on load. Any help would be much appreciated. Thanks.

  5. Mark says:

    I’m having a bit of trouble with this. Including jquery seems to break the tabs. I saw that you said you shouldn’t include prototype and jquery on the same page. First, why not, and second, how do I get my jquery code running within the tabs?

  6. Scott Meves says:

    @Mark, you should make sure you are running jQuery in compatibility mode or else jQuery and prototype both compete to use the global “$” function. http://docs.jquery.com/Using_jQuery_with_Other_Libraries

  7. David says:

    Hi Scott,

    Many thanks for your brilliant script. All works for me but i am having issues with google maps not displaying all the map within the tab.
    What happens is that 3/4 of the maps is greyed out.

    I have done many research and the issue (i think) is that the maps is not re-sized when the tab is clicked.

    The suggested command(s) to use is:
    map.checkResize();
    or
    google.maps.event.trigger(map, ‘resize’);

    My issue is that I do not know where to place this code, and in which script.

    Can you or anyone help please.

    This page has a list of similar issues (
    http://groups.google.com/group/google-maps-js-api-v3/search?group=google-maps-js-api-v3&q=hidden+div&qt_g=Search+this+group)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>