jQuery EasyTabs jQuery plugin

jQuery Plugin easy tabs download and demos

The jQuery EasyTabs plugin has recently hit v2.3 (well, v2.3.3 by the time I got this published). New for EasyTabs this release:

• Load tabs via AJAX
• Nest tab-set inside another tab-set
• Use non-standard markup for panels (for example, fieldsets inside a form)

See demos for each new feature below

AJAX tab content

It's been a long-time coming, and it's finally here. EasyTabs now supports loading content into panels via ajax.

EasyTabs has always placed emphasis on semantic, meaningful markup. Traditionally, markup for a tab/panel pair would look something like this:

<a href="#panel-1" class="tabs">I'm a tab</a>
<div id="panel-1">Panel content</div>

Notice that in the above example, if JavaScript is disabled, we're left with a normal anchor and anchor link in the page, which browsers understand by default.

The easiest way to modify a tab in order to specify that it's content comes from some ajax url would have been to add an HTML5 data- attribute, such as data-ajax. However, if JS were disabled, we're now left with an anchor link to an empty div on the page, with the actual url hidden behind a function-less data attribute.

So instead, I took a different approach with EasyTabs. If we want content for a tab to be loading via ajax, we put our ajax url in the href attribute where it belongs, and move the id of the target panel to a data attribute called data-target.

<a href="/some/ajax/path.html" data-target="#panel-1" class="tabs">I'm a tab</a>
<div id="panel-1">Panel content</div>

We can also load a page fragment with something like:

<a href="/some/ajax/path.html #some-element" data-target="#panel-1" class="tabs">I'm a tab</a>

By default, EasyTabs will load the content via ajax the first time the tab is clicked, and then hide/show the loaded content in the panel for each tab-change thereafter. If we want to have the tab re-request the ajax content each time it's clicked, we can set `{ cache: false }` in the easytabs options.

And finally, there are two new event hooks to which we can bind custom functionality, which will only be fired for ajax tabs: `easytabs:ajax:beforeSend` and `easytabs:ajax:complete`.

For example:

$('#container')
    .bind('easytabs:ajax:beforeSend', function(e, clicked, panel){
      var $this = $(clicked);
      $this.data('label', $this.html());
      $this.html('Loading...');
    })
    .bind('easytabs:ajax:complete', function(e, clicked, panel, response, status, xhr) {
      var $this = $(clicked);
      $this.html($this.data('label'));
      if (status == "error") {
        var msg = "Sorry but there was an error: ";
        $("#error").html(msg + xhr.status + " " + xhr.statusText);
      }
    });

• View AJAX tab demo

Nested tabs and anchors

We've always been able to have multiple instances of EasyTabs on one page. However, we couldn't previously deep-link to a tab-set which was nested inside the panel of another tab. That is no longer a problem.

So for example, if we had markup such as this:

$('#tabs').easytabs();
$('#subtabs').easytabs();

<div id="#tabs">
  <a href="#panel-1" class="tabs">Tab 1</a>
  <a href="#panel-2" class="tabs">Tab 2</a>
  <div id="panel-1">Panel content</div>
  <div id="panel-2">
    <div id="#subtabs">
      <a href="#subpanel-1" class="tabs">Subtab 1</a>
      <a href="#subpanel-2" class="tabs">Subtab 2</a>
      <div id="subpanel-1">Panel content</div>
      <div id="subpanel-2">Link to me!</div>
    </div>
  </div>
</div>

We can now bookmark Subtab 2 directly, by sharing `http://example.com/page#subpanel-2`, and EasyTabs will automatically open panel-2 and subpanel-2 by default when the page loads.

• View nested demo

Non-standard markup for panels

Panels no longer need to be div element, they can now be any markup we want. For example, the following now works:

<ul>
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
</ul>
<fieldset id="tab1">
  <label>Tab 1 input</label>
  <input type="text" />
</fieldset>
<fieldset id="tab2">
  <label>Tab 2 input</label>
  <input type="text" />
</fieldset>

• View custom panel markup demo

Get it now!

Check out the updated plugin homepage to download and view the docs.

• View changelog