How To Create Tabs Using jQuery

Justin Tadlock — Wed, 07 Nov 2007 22:15:54 +0000

Tabbed sidebar elements are in. Why bother making users scroll down the page, when they can simply click a tab to quickly access various parts of your site? Another popular thing is jQuery, “The Write Less, Do More, JavaScript Library.”

I’ve gotten a lot of emails asking how I created tabs with jQuery in the last couple of days — since I released the Visionary theme. It’s actually not all that hard (I’m not a JavaScript programmer), and I’m going to run you through a tutorial.

This tutorial is primarily based off WordPress, but can easily be ported anywhere else.

First, you’ll need four files. You need “sidebar.php,” “header.php,” “style.css,” and “tabs.js” (you’ll have to create this file). Then, you need to download a copy of jQuery. This file will be named “jquery.js.” Add it to your theme directory along with each of these other files.

Pulling the jQuery into your blog:

Open “header.php” and add these lines between the tags:

Now, you can close that file. You won’t need it anymore. All this does is include jQuery and our custom script on every page of your site. You can now use them anywhere.

Creating the sidebar:

First, we need to open “sidebar.php” and input this code. This is the XHTML we’re using. I’m leaving the content inside the tabs open. Do what you want with it. You shouldn’t change the specific classes used because we’ll need them when using jQuery. If you change them here, you’ll have to change them in your “tabs.js” file.



	
	
	
	
	
	
	

	
	
	
	
		List item
		List item
		List item
		List item
		List item
	
	

	
	
	
		This is a paragraph about the jQuery tabs tutorial.
	

	
	
	
		Something needs to go in here!

Now, our sidebar is set up. You can close “sidebar.php.”

The backbone, jQuery:

Open, or create, the file “tabs.js” for this part of the tutorial. This is the heart of our script. I’m sure there’s a better way to do this, but since so many people have requested this, they’ll have to stick with my version I guess. Copy and paste this code into your file.

Updated: Thanks to Karl from Learning jQuery for providing better code for this.

$(document).ready(function() {
// setting the tabs in the sidebar hide and show, setting the current tab
	$('div.tabbed div').hide();
	$('div.t1').show();
	$('div.tabbed ul.tabs li.t1 a').addClass('tab-current');

// SIDEBAR TABS
$('div.tabbed ul li a').click(function(){
	var thisClass = this.className.slice(0,2);
	$('div.tabbed div').hide();
	$('div.' + thisClass).show();
	$('div.tabbed ul.tabs li a').removeClass('tab-current');
	$(this).addClass('tab-current');
	});
});

You can close this file once you’re finished pasting the above code in.

Styling the sidebar:

Since I can’t decide how to style your sidebar for you, I’ll just leave you with things styled enough to get your started. Of course, you can do anything you want with styling. The tabbed sidebar has a lot of different classes that you can make use of. Or, you can even add your own. Use this code in your “style.css” file. Make adjustments to suit your needs.

/* Contains the entire tabbed section */
.tabbed {
	}

/* List of tabs */.tabbed ul.tabs {
	float: left;
	display: inline;
	width: 100%;
	margin: 0;
	padding: 0;
	}
.tabbed ul.tabs li {
	list-style: none;
	float: left;
	margin: 0;
	padding: 0;
	}
.tabbed ul.tabs li a {
	overflow: hidden;
	display: block;
	margin: 0 2px 0 0;
	padding: 10px 12px;
	}
.tabbed ul.tabs li a:hover {
	}

/* The current selected tab */
.tabbed ul.tabs li a.tab-current {
	}

/* The content shown when a tab is selected */
.tabbed div {
	float: left;
	display: block;
	width: 100%;
	}

/* Set the CSS to make sure the other tabs' content isn't shown other than the first */
.tabbed div.t2, .tabbed div.t3, .tabbed div.t4 {
	display: none;
	}

/* Content for inside your tabs' divs */
.tabbed div ul {
	}
.tabbed div p {
	}
.tabbed div div {
	}

There you have it. It seems like a good bit of code, but it really isn’t too bad. Most of the stuff you won’t have to touch too often. Just get everything set up and style it.

I hope this helps, and if you find any bugs, make sure to report them.

Valid XHTML Clickable Header Images

Justin Tadlock — Mon, 22 Oct 2007 15:09:29 +0000

This is a tutorial on how to make your blog or website header image clickable with valid XHTML. This is assuming that you’re using a CSS background image for your header or that you want to.

I was recently designing a theme that I wanted to add a clickable header image to, but had forgotten the best way to accomplish this task. So, I quickly searched Google and thought I found an easy way to do this with the WordPress clickable header tutorial, but quickly realized that it wasn’t valid XHTML. Many other tutorials showed this same example as well.

Basically, they were wrapping the element around the

element. This is bad. Very bad. CSS can do so much. Why ruin its beauty with poorly structured HTML?

After playing around with the CSS for a while, I came up with a solution.

First, you obviously need a header image. For the sake of this tutorial, the width and height of this image will be 350px by 90px. You can change the values in the CSS to match with your header image. Add this code to your header file or wherever your header image will go.

XHTML



Blog Title

Now, we need to style this thing.

CSS

#header {
	float: left;
	width: 100%;
	}
#header h1 {
	float: left;
	margin: 0;
	padding: 0;
	width: 350px;
	}
#header h1 a {
	padding: 0;
	margin: 0;
	width: 350px;
	height: 90px;
	display: block;
	background: url(images/header1.gif) no-repeat top left;
	}
#header h1 a span { display: none; }

These CSS values aren’t going to be exact all the time. Some things can change depending on your layout. Your positioning, height, width, margin, and padding are all variables that may need to change. The most important things are these lines:

#header h1 a {
	width: 350px;
	height: 90px;
	display: block;
	background: url(images/header1.gif) no-repeat top left;
	}

Giving the link (which has a background image) a width, height, block display, and adding the image are the things you must do.

That should pretty much do it. If you have any problems, please let me know through the support forums. Otherwise, enjoy using your valid XHTML clickable header image.

You can also use this technique to make any element clickable with a background image, not just header images.

Justin Tadlock » XHTML