Open-Source Projects

JQuery EasyTabs Plugin

If you like this plugin or use it in a project, please rate it on jquery.com.

Anyone that has used the tabs functionality included in JQuery UI knows that it’s a great tool that allows you to create great-looking themed tabs right out of the box. However, if you have need to customize those tabs significantly for your site, it can be a real pain.

After struggling to create highly customized tabs (custom layout, tabs below the content, etc.), we finally decided to create our own plugin. Rather than styling and arranging your tabs for you, like JQuery UI tabs, this plugin handles only the functionality of the tabs, and leaves the styling to you. With EasyTabs, you control the styling via your own CSS. Let’s get started!

UPDATE: This plugin now supports more flexible tab layout, bookmarking, back- and forward-button support for browsers, and cycling. Instead of re-writing this page, I did a small write-up of the changes.

Read about them here

What EasyTabs Does:

  • Creates tabs from an unordered list, which link to divs on the page
  • Allows complete customization of appearance, layout, and style via CSS
  • Supports forward- and back-button in browsers
  • Tabs are bookmarkable and SEO-friendly
  • Tabs can be cycled at a specified interval

What EasyTabs Does NOT Do:

  • Style your tabs in any way (not through javascript or CSS)
  • Load AJAX content, or anything not already on the page

Documentation

 

Installation

The HTML

Unlike JQuery UI tabs, the HTML markup for your tabs and content can be arranged however you want. At the minimum, you need a container, an unordered list of links for your tabs, and matching divs for your tabbed content.

<div id="tab-container">
  <ul>
    <li><a href="#tab-1-div">Tab 1</a></li>
    <li><a href="#that-other-tab">The Second Tab</a></li>
    <li><a href="#lastly">Tab C</a></li>
  </ul>
  <div id="tab-1-div">
    <h2>Heading 1</h2>
    <p>This is the content of the first tab.</p>
  </div>
    <div id="that-other-tab">
    <h2>Heading 2</h2>
    <p>Stuff from the second tab.</p>
  </div>
  <div id="lastly">
    <h2>Heading 3</h2>
    <p>More stuff from the last tab.</p>
  </div>
</div>

The Javascript

UPDATE: To enable back- and forward-button support for the users’ browsers, be sure to include either the jQuery HashChange plugin (recommended) or the Address plugin before including the EasyTabs plugin. There is no other configuration required, it will just work!

<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/jquery.hashchange.js" type="text/javascript"></script>
<script src="/javascripts/jquery.easytabs.js" type="text/javascript"></script>  

<script type="text/javascript">
  $(document).ready(function(){ $('#tab-container').easyTabs(); });
</script>

I varied the tab ids and names just to show you how flexible this is. There is no magic going on with this plugin; it’s not trying to guess the order of your tabs or what tab is associated with which <div>. Just make the id of the content <div> match the href of the tab link.

Required Markup

The only rules you need to follow are these:

  • containing <div> with a unique id
  • the container <div> contains an unordered list <ul> of links <a> UPDATE: As of version 1.1, this is no longer the case. You can now include your tabs anywhere within the container. It can be a <ul>, <ol>, <div>, or anything you want. The default is still a top-level <ul>, so to change it you just specify your selector with the new tabs option.
  • the container div also contains content divs (for the tabbed content), each div has a unique id that matches the href property of a link in the unordered list

Other than that, go nuts. The order of the elements does NOT matter. Your <ul> could be before or after the content divs (or even between them). You can put non-tabbed content between the elements. It doesn’t matter. Just make sure that the <ul> is a direct descendant of the container <div>.

div#tab-container > ul > a
div#tab-container div#tab-1
div#tab-container div#second-tab

 

Styling Tabs and Content

To style your tabs, you simply use your own CSS classes and stylesheet. Here’s some very basic styling to get you started:

#tab-container ul { margin: 0; padding: 0; }
#tab-container ul li { display: inline-block; background: #ccc; border: solid 1px; border-bottom: none; }
#tab-container ul li a { display: block; padding: 5px; outline: none; }
#tab-container ul li a:hover { text-decoration: underline; }
#tab-container ul li.active { background: #fff; padding-top: 6px; position: relative; top: 1px; }
#tab-container ul li a.active { font-weight: bold; }
#tab-container .panel-container { border: solid 1px; padding: 0 10px; }

The only changes EasyTabs makes is to the class name “active” to the currently-selected content <div> and tab <li> element. Also, any element inside of the currently-selected tab <li> element also gets the “active” class name added. This makes it easier to style the active tabs exactly the way you need. So, for instance, if your tab list looked like this:

<ul>
  <li><a href="#tab-1">Tab 1</li>
  <li><a href="#tab-2">Tab 2</li>
</ul>

And then you click on the first tab link, your markup will now look like this:

<ul>
  <li class="active"><a class="active" href="#tab-1">Tab 1</li>
  <li><a href="#tab-2">Tab 2</li>
</ul>

 

Configuration Options

EasyTabs comes with some configuration options as well, to make it even easier to style and customize.

Available Options

Option Description Values
animate Makes content panels fade out and in when a new tab is clicked. true | false
(default: true)
animationSpeed Controls the speed of the fading effect if animate is true. “slow” | “normal” | “fast” | integer (in milliseconds)
(default: “normal”)
defaultTab Selects the <li> tab to activate when page first loads. any single jquery selector (e.g. “li:first-child”, “li#tab-2″)
(default: “li:first-child”)
panelActiveClass Adds specified class to the currently-selected content <div> any class name string (e.g. “active”, “selected”)
(default: “active”)
tabActiveClass Adds specified class to the currently-selected tab <li> (and it’s descendants). any class name string (e.g. “active”, “selected”)
(default: “active”)
tabs The container element for your tabs, relative to the container element that easyTabs was applied to. any jquery selector referencing your collection of tabs (e.g. “ul#tabs > li”, “div#tab-container > span”)
(default: “> ul > li”, which selects the top-level <ul> within the container element)
updateHash Tells easyTabs whether or not to update the browser window’s URL hash, useful for SEO and bookmarking. true | false (default: true)
cycle Turns on automatic cycling through tabs, with the specified cycling interval in milliseconds. false | integer (in milliseconds) (default: false)

The tabs, updateHash, and cycle options were added in version 1.1.2. Make sure you have the most up-to-date version of EasyTabs by getting it from the jQuery plugin page.

Here’s an example that uses all of the configuration options:

$("#tab-container").easyTabs({
  animate: true,
  animationSpeed: 5000,
  defaultTab: "li#tab-2",
  panelActiveClass: "active-content-div",
  tabActiveClass: "selected-tab",
  tabs: "> div > span",
  updateHash: false,
  cycle: 5000
});

 

Demos

Here are some demonstrations, using various styles and configuration arrangements.



Entries (RSS) and Comments (RSS)