Beginning jQuery: Your First Clean Tabbed Plugin

I’ve been spending a lot of time learning jQuery the past couple of weeks and I’ve never realized just how fun it is to work with (at least when it is working right) and I’ve already been able to write several of my own functions and plugins.

The other day I wrote a basic tab feature for a client and thought it would make a great beginner’s tutorial. While it’s not the coolest plugin in the world, it’s something that clients use quite commonly. So let’s get started!

The HTML

First, we need to start off with the HTML. In order for our tabs to work, we need to set up a list of links for the tabs and the divs for the content. One of the cool things that makes this different from jQuery’s standard UI tabs, is that you don’t have to the tabs and the divs in the same container, you can theoretically place them wherever you want.

<div id="container">
<div id="tab1">This is tab 1!</div>
<div id="tab2">This is tab 2!</div>
<div id="tab3">This is tab 3!</div>
<div id="tab4">This is tab 4!</div>
<ul>
	<li><a class="tab1">tab 1</a></li>
	<li><a class="tab2">tab 2</a></li>
	<li><a class="tab3">tab 3</a></li>
	<li><a class="tab4">tab 4</a></li>
</ul>
</div>

If you were to save the page and load it now, you’ll see that every div shows up, which is not what we want! Let’s give it some CSS love to hide ALL of the divs and float the tab links together like a real navigation.

The CSS

#container div { display: none; }
#container li { float: left; }

The jQuery

Now for the awesome fun stuff! First things first. If we load the page to see what we’ve done so far, you can now see the navigation, but none of the divs are showing up because we hid them all. We of course want to show the first div, and this can be done in several ways, but for the purposes of learning jQuery, let’s do it there.

Before you start, you need to declare a document ready function. Basically document ready tells the jQuery to wait until the website has loaded before trying to implement the JS.

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

After document ready, we’re ready to tell jQuery to show our first tab’s div. Let’s also give our link to the tab1 an active status so we know that’s the tab we’re on.

jQuery is actually pretty simple and it’s more difficult to remember the syntax of parenthesis and curly brackets than it is the actual code. To tell jQuery to display something, we simply give it the show() function.

Similarily, if we want to give the corresponding link an active class so we can style it differently, we simply give it the addClass() function. Not too hard eh? Here’s the code:

$(document).ready(function() {
	$('#tab1').show();
	$('.tab1').addClass('active');
});

Now we need to make the tabs actually work when we click on the corresponding link. jQuery is so easy, I bet you’ve already guessed that the function is called click(). This tells jQuery that when the user clicks on the item it’s appending to, to perform an action.

$(document).ready(function() {
	$('#tab1').show();
	$('.tab1').addClass('active');
 
        $('.tab1').click(function() {
	});
});

We then need to tell jQuery to hide ALL of the divs again, otherwise if you were to click on tab1 and tab4, it would show both, before showing the right div. Just like the show() function, we have another easy function for that: hide(). Then we need to remove the active class from all of the links before adding the class to the active link.

$(document).ready(function() {
	$('#tab1').show();
	$('.tab1').addClass('active');
 
	$('.tab1').click(function() {
		$('#container div').hide();
		$('#tab1').show();
		$('#container a').removeClass('active');
		$('.tab1').addClass('active');
	});
 
	$('.tab2').click(function() {
		$('#container div').hide();
		$('#tab2').show();
		$('#container a').removeClass('active');
		$('.tab2').addClass('active');
	});
 
	$('.tab3').click(function() {
		$('#container div').hide();
		$('#tab3').show();
		$('#container a').removeClass('active');
		$('.tab3').addClass('active');
	});
 
	$('.tab4').click(function() {
		$('#container div').hide();
		$('#tab4').show();
		$('#container a').removeClass('active');
		$('.tab4').addClass('active');
	});
});

See how easy that was? It’s unbelievable how easy and quick jQuery has been to learn so far. Of course, there are plenty of advanced plugins that will take forever to learn, but for the most common items like dropdown menus, tabs and sliders, it’s actually pretty easy!

Of course, you can simply use the tabs built into jQuery UI itself, but what fun is that? Sometimes it’s quicker and easier to roll your own, especially when you get into some of these designers’ crazy widget things.

View Demo