Create a Graceful jQuery Tabbed Widget in 5 Easy Steps

Tabbed widget boxes have become a popular way to display useful information while conserving valuable screen real estate. Here you’ll learn how to use jQuery and some CSS to create an attractive tabbed widget that gracefully degrades into separate boxes. Come check it out!

The great beauty of the jQuery library lies in its effortless selection and manipulation structure, which makes rearranging static elements into dynamic organizations tons easier. Today, I’ll show you how use these abilities to build one of those popular tabbed widgets for displaying blog info (recent posts, popular posts, etc.). Of course, for this application we could use jQuery UI’s tabs feature, but we’re doing it by hand today for two reasons:

For this small feature, we don’t need all the extra file size of jQuery UI. All we need is basic jQuery and a few lines of our own code, which is much more efficient.

We don’t want to get locked into using pre-made functions all the time. While this isn’t truly ‘under-the-hood’, it will help us keep our code minds sharp and innovative, and, as I’ll show later, this concept can be applied in other situations, not just for tabbed widgets.

Ready? Let’s get started!

Demo

Step 1: Build the Infrastructure

The first thing we have to do is set up our blank page- index.html. We want it to look perfectly acceptable without any JavaScript, so we’ll create 3 separate widgets, each with an h5 title and unordered list inside. In the example, these are going to hold lists of the most popular posts, the recent posts, and the blog’s categories. Here’s the code:

NOTE: I’ve used static lists because this is an example. Of course in real life you would use server-side scripting to generate these lists. In WordPress these would be <?php get_mostpopular(); ?> (assuming you have Hector Cabrera’s Popular Posts Plugin), <?php wp_get_archives(‘type=postbypost&limit=3′); ?>, and <?php wp_list_cats(); ?>

Step 2: Make it Pretty

It doesn’t have to be spectacular, but it’ll be a lot more fun, and practical, to give our widgets some nice styles. Of course, you’ll want to apply your own styles that match the overall theme of the site, but this is a nice default to get you started:

Step 3: Stack it Up!

Alright, here comes the fun part- using jQuery’s awesome capabilities to rearrange our widgets. We’re going to hide the widgets, then take their content and place it inside a newly created tabbed container. In the demo, I’ve put my js code in a separate file- tabbedwidget.js. If you are unfamiliar with jQuery, now would be a good time to check out the Official jQuery API Reference and browse a bit to get familiar with it (in this tutorial I’m assuming you have a basic knowledge of jQuery functions and selectors). You also might be interested in reading Smashing Magazine’s article on the finer details of module tabs- Module Tabs in Web Design- Best Practices and Solutions.

Anyways, the first thing we’re going to do is set up our $(document).ready() function.

$(document).ready(function(){
});

Next, we’ll hide all the widget wrapper divs, specified in my demo with a class of “widget”.

$(document).ready(function(){
$(".widget").hide();
});

Now, we’ll use the first widget as a reference point to insert our tabbed container, using the jQuery before() function. This tabbed container (a div) is going to hold a wrapper (a ul) for the tabs and a wrapper (another div) for the content area. In order to make our code more readable, we’ll go back to the beginning of our function and define a variable, “newWidget”, to hold the HTML for the new container. This is what we have so far:

So we have a new container, with no tabs or content in it. To add content and corresponding tabs, we’ll use the each() function to grab each unordered list inside a div with a class of ‘widget’. Then for each of these, we’ll add a tab to the tabwrapper, using the ul’s id as a title. Then we take the actual ul and append it to our new widget, making sure to close our each() function.

And here, (drumroll please) is the finished version, with and without JavaScript:

Step 5: Go Have Some Pretzels

That’s it! Quick, easy and entirely accessible. You now have 100% accessible widgets, well arranged for SEO and quite handsome without any JavaScript. And, for those folks who do have JS capabilities, our widgets are packed into an efficient, screen saving container, using only 16 lines of code.

There are plenty more opportunities for this as well. You could take items out of the sidebar and put them in a dropdown menu at the top of your page. You could take blog posts and put them in a rotating featured posts section. You could build a jQuery plugin even more powerful than tabs() that could grab content and repackage it using any number of parameters. The possibilities are endless!

So tell me- do you have questions about the tutorial? Ideas for further development of this concept? Suggestions for improvement on the current model? I’d love to hear your thoughts!

I’m a bit late to the party, but just wanted to say thanks for this, it works a treat!

P.S. As Gautam says above, the demo link is broken.

Andrew

December 3rd, 2011 at 03:28 pm

Great widget – do you have any ideas on how to make the tabs rotate from one tab to the next, say every 20 seconds. And then if user want to click a tab, the rotation stops for a while? I have been looking for this feature and haven’t been able to find anything. Thank you for any suggestions.

What is Webitect?

Hi, and welcome! Webitect is a blog devoted, very simply, to producing fresh, high-quality content for web designers and developers. We do our very best to give you the tools, resources, inspiration and tutorials that you're looking for.