I decided to ditch jQuery UI on a recent project when I couldn’t get tabs & accordions to play nice together (also, their site was down when I needed it so I took that as a sign). This was a great opportunity to try jQuery Tools and I have been very impressed thus far.

To use the minimal tabs interface you can simply follow the instructions on their site, but if you want to nest tabs inside one another you’ll need to change things slightly. I’ll demonstrate below:

the Mark Up

<ul class="tabs main">
  <li><a class="main" href="#1">Main Tab 1</a></li>
  <li><a class="main" href="#1">Main Tab 2</a></li>
</ul>
 
<div class="panes main">
  <div>this is main tab 1 content. it includes another set of tabs
 
    <ul class="tabs nested">
      <li><a class="nested" href="#2">Nested Tab 1</a></li>
      <li><a class="nested" href="#2">Nested Tab 2</a></li>
    </ul>
 
    <div class="panes nested">
      <div>this is my nested tab 1 content</div>
      <div>this is my nested tab 2 content</div>
    </div>
 
  </div>
  <div>this is my main tab 2 content</div>
</div>

The key in this sequence is that the seemingly arbitrary href attribute on the tab anchors has different content for the main tabs (#1) than the nested tabs (#2). This is required or your nested tabs will keep returning to the main tabs when you click on a tab link.

the JavaScript

To configure the nested tabs, you can define the JavaScript as simply as this:

$(document).ready(function() {
  $("ul.main.tabs").tabs("div.main.panes > div", {tabs: 'a.main'});
 
  $("ul.nested.tabs").tabs("div.nested.panes > div", {tabs: 'a.nested'});
});

the tabs() function is called on a jQuery selector that matches the unordered list and it takes as its first argument a selector for where to find the tab’s content panes. It’s second argument is a single option that tells tabs() which elements to use as links for the tabs. The default is ‘a’, but to differentiate the main tabs from the nested tabs, it needs to be passed explicitly with the correct class for the anchor.

the Style

Of course, to make these look cool you’ll need some nice CSS applied to the elements at play. I’ll leave that to you, but you can get a decent start from the demo page for the library.

Enjoy!

<a href="http://hulu.com" target="_blank">check it out</a>

This works just fine but is not actually valid markup. Fortunately, we can use jQuery to add the target attribute so it doesn’t muck up the HTML.

$(document).ready(function() {
  $('a[rel="external"]').click(function(){
    $(this).attr('target','_blank');
  });
});

Change that invalid link to look like this instead:

<a href="http://hulu.com" rel="external">check it out</a>

Now the link forces browsers to open a new window/tab and the markup is still valid. Easy cheesy.

$(document).ready(function() {
  $('input:text:first').focus();
});

First Empty Input:

$(document).ready(function() {
  $('input:text[value=""]:first').focus();
});

If you are writing any jQuery whatsoever and want to polish your skills, check this:

The Complete Guide For you to Become an Almighty jQuery Developer

The demo was quite attractive so I immediately began trying to work this implementation into my app. Upon reviewing the source code, I became a little less excited because the markup and styling left a lot to be desired. So instead of just complaining about it in the comments of the blog post (as had become my unfortunate custom), I figured I’d just re-write the thang until I was happy with it.

A few of my redesign goals:

• Eliminate redundant step titles and descriptions
• Remove unneeded styles from Cody Lindley’s CSS step menu
• More jQuery, less HTML
• Use valid markup
• Reduce LOC dramatically
• Comment code well to increase learning/understanding potential

So How’d it turn out? I validated the markup, removed all redundancy, reduced the HTML required from 84 to 21 LOC, the CSS from 191 to 108, and made the JavaScript unobtrusive. As far as the commenting and quality of the JavaScript used, I’ll leave that for you to judge.

To see the wizard in action, follow this link.
You can also download all the source files as a zip or tarball.

Feel free to give suggestions in the comments section. Or do as I did and modify my version to make it even better!