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!
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?
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.
in tab 3 example you put a div in it.. but it won’t show up.. cos it hidden?
how to show this div?
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.
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
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.
i have this kind of error during runtime what can i do
please help me
Fatal error: Call to undefined function: _e() in C:\Program Files\xampp\htdocs\tab\sidebar.php
@raja
you probably don’t have wordpress installed. Just replace with the plain text “Tab 1″. Do it for all of them.
@justin thanks for the write up. Totally answered a question for me. One note: Basing this on the tab’s href would allow it to work as a ‘jump list’ when JS is off. As it is, this will just leave a dead list of non-links on the page when JS is unavailable. Tab 1 and then content.
wow. comment code removal fail. sorry, dunno how to get it in.
hi there
is it possible to use more of these tabs on one single site without copy & paste the code over and over again and include the same .js with a different name?
Like
———-
Tab1 Tab2 Tab3
TABcontent1
———
Tab3 Tab4 Tab5
Tabcontent2
———
and so on
possible?
this was awsome, but when i turned off the JS for accessability testing, it hide the content, which isnt so good.
It was easy to fix though, by adding the display none class when the js is executed (the last line was added )
$(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’);
$(‘.tabbed div.t2, .tabbed div.t3, .tabbed div.t4′).addClass(‘tabbed_hidden’); //here.
//this line means that the tabs are hidden by js not css on load so when js is disabled the divs are shown.
but then the class must be removed when the user clicks the ul li a link…. like so…
// 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’);
$(this).removeClass(‘tabbed_hidden’); //here
//this just removes the class we added before
});
});
and the css
.tabbed_hidden
{
display:none;
}
i hope this helps anyone who wants to make their websites accessable.
I really liked your tutorial ! I consider it the most practical example i found. I use it everytime i need it ! Thanks for sharing your knowledge!
hi ,
i m new one. so can u tell me how can i implement this code in my page.
Thanks man this worked perfectly on my site after I cleared my cache lol..
ey, thanks for this tutorial … been searching for the right one
Hello, i have enjoyed this tutorial. Much appreciated.
thanks..it’s good tutorial..i have tried it and it works heheh ..
Old now, but good tutorial
To everybody who is strugging to make it working with the latest version of wordpress, you just have to replace the “$” sign in the tabs.js to “jQuery” as Wordpress built-in jQuery doesn’t recognize the dolalr sign, but the jQuery name.
I think you should mention it in your blog post, as it will save time to people trying to make it working with the latest wordpress isntallations.
Cheers,
Nicolas.
yeah, thanks Nicolas you save my day!!
@nicholas – you’re right – this took me a while to figure out. To explain it a little more – wordpress now loads jQuery in no-conflict mode – which means you can’t use the $ shortcut.
But if you use jQuery(document).ready(function($) then you can leave the $ within the function..
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
cheers, pc
hey m unable to find tab.js file could you help me out plz
i searched for it,
it might seem funny to you guys,but i am a newbie here
anyine to help me out ???
Many here are right. Currently you are unable to declare any DIV classes under each tab. They simply do not show up.
i m looking for jquery tabs and will try ur code
thanks
Justin,
Thanks for this tutorial. I took the concept explained in here a step further and combined it with a few more JQuery functions. The result was a natively tabbed sidebar. So whatever widgets you add to your sidebar get displayed as tabs.
It was an interesting problem to think about, because the WP sidebar parameters $before_widget, $after_widget, $before_title and $after_title don’t lend themselves naturally to the markup you proposed above. You can see the writeup on my approach if you please.
Cheers,
Sayontan.
Great tutorial, really simple to use.
Have adapted the code a small bit in order to create a tabbed area on a page which people are able to switch between.
However i would like to know if it is possible using this tutorial to link directly to a specific tab.
Thanks for the writeup, but I was disappointed because I saw your div within a div for tab3 and thought it had solved the problem that all other samples had. But alas, it didn’t work.
I’d guess it’s not that hard to add code to search child divs and process the visibility of all of them, but I was hoping to find a full solution I could use.
Maybe once I find a solution, and finish my website, I’ll post the code.
Great little tutorial, helped me get my head around tabs.
Thanks
thank u sooooooo much, am doing a project and iv struggled with this all day
a small problem:
I used you code and everything works fine, except that divs inside the .tabbed div (the content area) do not show up, s, s, and everything else work fine but the divs are hidden. I tried setting the display style in the style sheet but no luck. Any Ideas?
Hey Justin,
Thanks for this tutorial, I’ve been playing with the jquery a bit and haven’t been too successful so far, is there an easy change to the jquery to make multiple instances of these tabs work together?
Thanks
Hi,
first of all i am not really PHP expert.
I am working on a blog website.
On home page they are looking for recent post to show up.
on archive page it should be all the collection.
I was wondering is there any how i can make categories to get data from recent post (which is on the home page) also same content on the archive.
Please see:
http://postimage.org/image/4k9wun6bv/
Here is how i am thinking of getting post from archive and showing it on home page.
Please give me any help will be appreciated.
Thank you.
Hi Justin, Nice tutorial. One problem I’m having is that I use s within my tabs. The solution I found was to specify only the first level of elements under the tabbed div, e.g.:
( http://stackoverflow.com/questions/977883/selecting-only-first-level-elements-in-jquery )