Replacing jQuery UI Tabs

I’m currently in the middle of transforming my lovely fiance’s site into one that is a bit more responsive and compatibility on smaller screens. It was a long time ago that I created this site, and since then I’ve learned quite a bit more about CSS, HTML, and the subject of this tutorial… JavaScript.

On the right of her site, you can see there is a tab function that toggles through an about blurb, a search field, and a list of archives. This is being accomplished by including the popular jQuery library, jQuery UI. jQuery UI is great, and can offer a lot of solutions to common design patterns. For something so small as toggling between divs, however, we can accomplish that without having to include the rather bulky size of jQuery UI. Below is an example of what you can do to lighten up your code, and make your site run a bit faster.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<div id="tabs">
 
	<ul class="controls inline clearfix">
		<li class="active"><a href="#about">About Me</a></li>
		<li><a href="#search">Search</a></li>
		<li><a href="#archive">Archive</a></li>
	</ul>
 
	<div id="about" class="block active">
 
		<h3>Hi. I&#8217;m Shannon.</h3>
		<p>I enjoy illustrating cute critters, catching typos in magazines, watching Wonder Years marathons in my pjs with my lad, cuddling my menagerie of pets and geeking out with my Google Reader.</p>
 
	</div><!--/end .about-->
 
	<div id="search" class="block">
 
		<h3>Search</h3>
		<?php get_search_form(); ?>
 
	</div><!--/end .search-->
 
	<div id="archive" class="block clearfix">
 
		<div class="split right">
 
			<h3>Categories</h3>
			<ul class="circle">
				<?php wp_list_categories( 'show_count=1&title_li=' ); ?>
			</ul>
 
		</div><!--/end .right-->
 
		<div class="split left">
 
			<h3>Archives</h3>
			<ul class="circle">
				<?php wp_get_archives( 'type=monthly' ); ?>
			</ul>
 
		</div><!--/end .left-->
 
	</div><!--/end .archive-->
 
</div><!--/end #tabs-->

Above is the html code. The only required classes are “block”, “controls” and “active.” You can put the active class on whatever block you want to show first. Be sure the ID of the “block” corresponds to the “href” property of the anchor tag in the “controls” unordered list. The three php functions above are from WordPress.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

ul.inline	{ 
 
	li		{ margin-left: 1em; float: left; }
	li:first-child	{ margin: 0; }
 
}
 
#tabs	{ margin-bottom: 1.25em;
 
	.block		{ padding: 1.25em; display: none; }
	.block.active	{ display: block; }
	div.split	{ width: 130 / 280 * 99%; }
 
	ul.controls	{
 
		li		{ border-left: 1px solid #000; }
		li:first-child	{ border: none; }
		a 		{ padding: 10 / 12 * 1em; display: block; background: #333; color: #fff; font-weight: bold; }
		a:hover		{ background: #222; }
		li.active a 	{ background: #555; }
 
	}
 
}

The above CSS is written in Sass. Most of the above is for aesthetics. The only required style is the display properties on the “block” and “active block” classes. It also might be a good idea to include some sort of indicator for the active anchor tab. If you’re wondering why I’m multiplying by 99% instead of 100%, I find that multiplying by 100% is too accurate and can cause flickering when resizing, this kind of rounds the calculation off a bit better.

1
2
3
4
5
6
7
8
9
10
11
12
13

jQuery( '#tabs' ).find( '.controls' ).find( 'a' ).click( function( e ){
 
	e.preventDefault();
 
	var el = jQuery( this ); 
 
	jQuery( '#tabs' ).find( '.controls' ).find( 'li' ).removeClass( 'active' );
	el.parent( 'li' ).addClass( 'active' );
 
	jQuery( '#tabs' ).find( 'div' ).removeClass( 'active' );
	jQuery( '#tabs' ).find( el.attr( 'href' ) ).addClass( 'active' );
 
} );

All of the above code is required in order to make the tabs work. What the code above is doing, is: when the anchor tag of the unordered list “controls” is clicked, it resets all of the elements by removing their class of “active.” After that it adds “active” class back to the list item of the anchor the user clicked, then find the “href” attribute assigned to that anchor and assigns the corresponding “block” with that id, the class of “active.”

Pretty simple no? This could probably be turned into a plugin on its own pretty easily, feel free to make it your own.

Questions or suggestions? Leave them in the comments.