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 <head></head> tags:
<script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/jquery.js'; ?>"></script>
<script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/tabs.js'; ?>"></script>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.
<div class="tabbed">
<!-- The tabs -->
<ul class="tabs">
<li class="t1"><a class="t1 tab" title="<?php _e('Tab 1'); ?>"><?php _e('Tab 1'); ?></a></li>
<li class="t2"><a class="t2 tab" title="<?php _e('Tab 2'); ?>"><?php _e('Tab 2'); ?></a></li>
<li class="t3"><a class="t3 tab" title="<?php _e('Tab 3'); ?>"><?php _e('Tab 3'); ?></a></li>
<li class="t4"><a class="t4 tab" title="<?php _e('Tab 4'); ?>"><?php _e('Tab 4'); ?></a></li>
</ul>
<!-- tab 1 -->
<div class="t1">
<!-- Put what you want in here. For the sake of this tutorial, we'll make a list. -->
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
<!-- tab 2 -->
<div class="t2">
<!-- Or, we could put a paragraph -->
<p>This is a paragraph about the jQuery tabs tutorial.</p>
</div>
<!-- tab 3 -->
<div class="t3">
<!-- Or, we could add a div -->
<div>Something needs to go in here!</div>
</div>
<!-- tab 4 -->
<div class="t4">
<!-- Why not put a few images in here? -->
<p>
<img src="image.gif" alt="Sample" />
<img src="image.gif" alt="Sample" />
<img src="image.gif" alt="Sample" />
</p>
</div>
</div><!-- tabbed -->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.
Hi Justin,
Nice tutorial! One way you could reduce the code a bit is to show the correct div based on the class of the clicked tab. That way you wouldn’t have to repeat the same basic thing four times. Here is what it would look like:
$(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');});});Hi justin.
Again, this is great. I have downloaded the updated visionary theme, and thanks to this tutorial i have actually managed to get TAGS displayed where the archives, popular post and so on are.
Feeling like a champ here after reading the tutorial.
Karl, thank you. I knew there was an easier way because I was wondering what I’d do if I ever had a script where I had 10 tabs or so. That would get a bit out of hand. I’m about to update the code.
Kristian, I’m glad I could help and that you’ve got your tabs working like you want them.
Nice explanations & tutorial. One thing I miss though with this is more correctly structured markup, that makes sense when JS is off on when printed, for instance.
At the moment you have:
<ul><li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="div1">stuff</div>
<div id="div2">stuff</div>
<div id="div3">stuff</div>
Something that would make more sense would be:
<ul><li>tab1
<div id="div1">stuff</div>
</li>
<li>tab2
<div id="div2">stuff</div>
</li>
<li>tab3
<div id="div3">stuff</div>
</li>
</ul>
i use it also in my blog. try take a look. i did change the css also. but i’ve problems with css. it will float on left if there’s no content on left. help me please. dont understand the id and class u use in the page.
Good work Justin. One question – would the links be spiderable?
Od3n, I’m not sure exactly what you’re talking about. Everything looks pretty good to me.
Mani, thanks. I believe the links would be. That’s not my area of expertise. The links are just simple HTML links. So, if those are spiderable, then I suppose these are.
@Justin try use search in my blog to find something not there for example, type xx. u\’ll see some broken style. where to modify it? sorry but i\’m just noob. and how to change the css style of the tabbed content? wanna it look like my side bar style with cube numbering style. erm. can give me ur email?
Od3n, this float issue has nothing to do with this script. This is a CSS mistake that you’ve made somehow. I would suggest structuring it or changing your CSS to fit with your theme. The CSS is left open so that you can modify it to fit with your site. This is a tutorial for people with a more advanced knowledge of CSS and XTHML.
I know English may not be your first language, but for the sake of my sanity, please capitalize your sentences and try to use some form of proper grammar.
@Justin Thanks. I’ll try to improve my english.
Hi Justin,
I have no design experience and am wondering how do i put the php files sidebar, style and header into a html file to test out and see it working.
Thanks
Bob
Bob, I’m not exactly sure what you’re asking because you don’t put these into an HTML file. You open the template files from your theme that I mentioned in the tutorial.
If CSS and XHTML are totally unfamiliar territory for you, then this really isn’t a tutorial you should be following. This isn’t exactly an advanced tutorial, but it’s definitely not for beginners. I can point you toward some good starting places though.
Try to leave some more specific details about what your problem is, and I’ll try my best to help out.
I was looking for tutorial like this for week now, glad that I found it finally! It looks a bit complicated though… However, I’ll try to understand…
Thanks again!
Oh well, something is not working for me – it shows 1st table and don’t let me click on tab2 or tab3 etc… I give up for tonight it’s already 5AM here, will try sort it out Tomorrow probably.
IngaOz, I hope you get it working.
One minor note: please don’t leave a link to your feed in the website field when commenting. This unintentionally gets users to subscribe to your feed. It’s something I won’t allow on JustinTadlock.com.
Thanks a ton for this tutorial! It is exactly what I was looking for. I was able to use it on a static page very easily. GREAT JOB!
My colleague Alex recently posted his take on creating tabs with jQuery. You can compare the implementation here:
http://www.thetruetribe.com/2008/04/how-do-i-make-tabs-in-jquery-without-jq.html
thanks for the tutorial.. this help me a lot.
Great tutorial! But i am facing a problem. Problem is it isn’t producing tabs for me, instead, it is producing a
Tab 1
Tab 2
Tab 3
Tab 4
with results below all that.
What did i do wrong my dear?
Ok, got it. It ain’t working in OPERA.
Hungzai
As stated in the tutorial, “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.”
I wouldn’t be able to help you with styling the tabs without seeing your how your theme works.
If you need help with the code part, stop by the forums.
I’m done. Took me a lot of time to get it working. And still not perfect, a little cranky. Anyway it’s a good start. Thanks for your article.
If you look at my site in firefox, there appears a dot beside my tabs, it doesn’t in IE or OPERA. Is that a bug ?
One more question, how to i center the list of tabs? I have tried everything and it doesn’t. It will float to the left. The only way to do this is to place them inside tables but even then, they don’t center inside cells, you have to adjust the cells according to the length of the tabs, but problem with that is every browser are displaying different lengths and as such it doesn’t work in OPera.
I wonder how people manage to center those tabs? Please share your valuable techniques! Thanks in advance!
Another problem is that cannot operate 2 tabs in the same template. When one is working, it would disable the other. Or did i overlook something?
Ok, it’s all up and working perfectly now. For those who needed an example here’s mine http://www.hungzai.com/red-house/
There are a few issues i encountered in drilling it to perfection.
1) There is a bug in firefox where if you have a list items in one of your tab’s content, the first item on the list would jump out of the content box(container). The solution is to place a float: left in .tabbed ul.tabs
2) There is no way you can center the row of tabs. It just doesn’t work, whether you wanna float it or align it or even if you’re placing them inside a cell in a table, they would be aligned left. I’m not sure why but the solution for me is first, put everything in a cell and adjust the cell to the right length(that is before the last tab returns the next row). Bear in mind, at this point there would still be a little leftover spaces on the right, most likely to be something betweeen 5px to 10px. Next what i do is to place a left border in .tabbed ul.tabs to counter the right spaces. If you want it to look more perfect, you could do the top and bottom too.
Lastly if you decide to use them in a table, you CANNOT place the codes in different cells, they just don’t work and cut off from each other. You have to place them in one single cell. It’s for alignment purposes only anyway if you decide to use them on a page, for sidebars i guess you can do without one since it would be auto-adjusted. Good luck!
Hungzai
As I’ve already mentioned, you could’ve stopped by the forums for my help with this. Please try not to flood the comments with questions about code problems. This is the reason I have forums set up.
To respond to your first and second points.
1) This isn’t really a bug in Firefox as far as I can see; the bug is with other browsers, such as Internet Explorer.
2) There are ways to center things. That’s what CSS is for, which allows you to do pretty much anything with enough creativity and patience.
I’m not sure why you would ever use a table with this. It doesn’t make much sense.
I’m fairly certain you would’ve had an easier time implementing this stuff if you had cleaned up some of those 217 XTHML errors first. Check out the online validator.
Oops sorry! I didn’t know you have a forum for it, i apologise for flooding your comments area. Feel free to delete my comments here!
nice tutorial. I’m learning how to do a box with some links using tabs for different categories with jquery.. I google you! so i use some part of your tutorial and some part of the jquery documentation to have a better idea for the jquery tabs
thanks again!
[...] This effect is achieved with a mix of Javascript and CSS and in this tutorial I will show you how to get it set up on your site, I will be using three tabs like on Help Developer, these will be Recent Posts, Categories and Archives. This tutorial is an extension of Justin Tadlock’s post here. [...]
[...] This effect is achieved with a mix of Javascript and CSS and in this tutorial I will show you how to get it set up on your site, I will be using three tabs like on Help Developer, these will be Recent Posts, Categories and Archives. This tutorial is an extension of Justin Tadlock’s post here. [...]
Does it still work with wordpress 2.6? I get the tabs and css ok. Everything looks nice nut nothing happends when I click a tab?
[...] This effect is achieved with a mix of Javascript and CSS and in this tutorial I will show you how to get it set up on your site, I will be using three tabs like on Help Developer, these will be Recent Posts, Categories and Archives. This tutorial is an extension of Justin Tadlock’s post here. [...]
Thanks tutorial
I like it very much !
Hi Justin,
I was testing the above tutorial to implement it with a WordPress theme, I have seen a misspelling in the CSS part, which may lead to some confusion. Here is the code I’m up to:
.tabbed ul.tabs li {
list-style-typ: none;
float: left;
margin: 0;
padding: 0;
}
Note:
list-style-typ:, where it was supposed to belist-style-type:. An “e” is missing.Good tutorial, though. Thanks for sharing.
Never noticed before. I just changed it to
list-stylebecause that’s a little shorter anyway.If I use a Hello inside the tab it does not display any content in latest firefox? How can I use within the tab div??Thanks
mwpwalshe
whoops looks like Im missing “”div”" tabs 4m above I will try again!
If I use a div Hello /div inside the tab – It does not display any content in the latest fiorefox??? How can I use the div /div tag within the tab div?
Aye Justin,
Thanks a lot, step by step explanation really helped me,
I’m a PHP developer and I’m very new to Design stuff.
This was quite helpful.
[...] 19. How To Create WordPress Tabs Using jQuery [...]
[...] 19. How To Create WordPress Tabs Using jQuery [...]
in tab 3 example you put a div in it.. but it won’t show up.. cos it hidden?
how to show this div?
[...] 19. How To Create WordPress Tabs Using jQuery [...]
[...] 5. Tabbed side bar [...]
[...] 19. How To Create WordPress Tabs Using jQuery [...]
Hi Justin, this is a great post. I got it to work immediately but I’ve come across a problem. I have set the tabs to load conditionally, checking to see if a certain custom field exists or not, and it works great if the first tab is supposed to load along with others. But when it happens that the first tab is not needed and other tabs are, it would show the tabs well, yet fail to load automatically unless I click on them.
I see that the tabs.js code tells the first tab to stay open, but do you think there’s other ways to let other tabs load in case the first one is not needed? For example, on my site, I am trying to put up multiple versions of videos.
Thanks
This was very useful! Thanks!
I implemented tabs based on this example after having first tried jQuery UI Tabs which didn’t allow separating the tabs container from the corresponding content divs. Using this example as a starting point it was a piece of cake!
dude, your my savior… this tutorial really helped me with my project… BWAHAHA thanks man!!!
Nice Tutorial
Well I used your tutorial and loved it and it worked great, but, when I you rollover the tabs the cursor thinks it is text but as we know its really a tab thats clickable. I didn’t read all these comments in case someone else already posted a solution but I used this:
.tabs a:hover, .anchors a:focus, .anchors a:active {
cursor: pointer;
}
And it worked great.
[...] 19. How To Create WordPress Tabs Using jQuery [...]
[...] 19. How To Create WordPress Tabs Using jQuery [...]
Hi Justin,
I had having to design anything that scrolls, but alas sometimes this is not possible. So thanks for the heads up on tabbing. I am sure that visitors would much prefer this.
thanks again
George
This is fantastic, i’ve been working on a way to make our new website more web 2.O and adding tabs for the blog sliding to different categories will be very nice. Great work. Dave
[...] How To Create Tabs Using jQuery — 1:32pm via [...]
Hi Justin,
Great article! I started working with tabs recently and having issue with events and disabled tabs.
At page load I am attaching click event to the tabs and disabling few of the tabs. Even if tabs are disabled, click is still firing. Is there a way to find out if clicked tab is disabled so that I can avoid doing regular operations.
Thanks.