Animated tabbed content with jQuery
A lot of websites on the Internet have tabbed content now a days. The problem I find with most of them is that most of the time they can be quite dull. For my new looks I created a container which has the ability to switch content through tabs, but with an animation. This tutorial will show you how to create your own tabbed content step by step.
Download
Tabbed Content zip-archive
Example
View the Tabbed Content in action!
In this tutorial I am going to show you some web development techniques that can be used in your next projects. This will cover some CSS, HTML and jQuery tricks.
The sources of this tutorial are downloadable here: http://www.gayadesign.com/scripts/tabbed/tabbedContent.zip
Example of the outcome is found here: http://www.gayadesign.com/scripts/tabbed/
First thing we need is some basic HTML layout to fit what we are going to make.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Tabbed content</title> <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' /> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script> <link href='css/tabbedContent.css' rel='stylesheet' type='text/css' /> <script src="js/tabbedContent.js" type="text/javascript"></script> </head> <body> </body> </html>
I already included jQuery and other files in the head section. We’ll be making these files step by step in the next few minutes.
Next thing we need to do is create the structure of the document. What we need is a container with the tabs and a container which the content will that switch if we change tabs.
As a nice feature to enhance this all we’ll use a tab background that will move to the choice the user makes. While this tab moves, the content will also change to the selected tab.
For this we need a container containing the tabs and the background, a container containing the content and container that prevents the content to be shown prematurely.
Take a look at the following code:
<div class='tabbed_content'> <div class='tabs'> <div class='moving_bg'> </div> <span class='tab_item'> Tab one </span> <span class='tab_item'> Tab two </span> <span class='tab_item'> Tab three </span> <span class='tab_item'> Tab four </span> </div> <div class='slide_content'> <div class='tabslider'> <!-- content goes here --> </div> </div> </div>
It’s time to do a little styling to the tabs section and the overall container. Note that in the next part I am going to use an image which is included in the source archive. This will enhance the looks of the tabbed container.
This following CSS will make the tabs appear as tabs:
.tabbed_content {
background-color: #000000;
width: 620px;
}
.tabs {
height: 62px;
position: relative;
}
.tabs .moving_bg {
background-color:#7F822A;
background-image:url(../images/arrow_down_green.gif);
background-position: bottom left;
background-repeat: no-repeat;
left: 0;
padding: 15px;
padding-bottom: 29px;
position: absolute;
width: 125px;
z-index: 190;
}
.tabs .tab_item {
display: block;
float: left;
padding: 15px;
width: 125px;
color: #ffffff;
text-align: center;
z-index: 200;
position: relative;
cursor: pointer;
}
Note that the tab container has a position of relative to make the moving background position to it. Now we can easily move the moving background using the left property.
In the next part we are going to add the first few lines of Javascript to the tabbedContent.js file to create a mouseover effect on the tab items.
Use this code as a skeleton:
var TabbedContent = {
init: function() {
},
slideContent: function(obj) {
}
}
$(document).ready(function() {
TabbedContent.init();
});
This code is will execute the init function once the page is loaded.
Now we need to make is so that the moving background moves to the tab item which is hovered on. Implement the following code:
$(".tab_item").mouseover(function() {
var background = $(this).parent().find(".moving_bg");
$(background).stop().animate({
left: $(this).position()['left']
}, {
duration: 300
});
TabbedContent.slideContent($(this));
});
This will make all the items with the class tab_item behave as if it was a tab. It also moves the moving background to the right position, matching the left property with that of the tab.
TabbedContent.slideContent($(this)); will make the content switch in a few steps. We’ll get to that.
Next up is creating the content and it’s CSS. The content goes in the place we put .
<ul> <li> This matches the first tab </li> </ul> <ul> <li> This matches the second tab </li> </ul> <ul> <li> This matches the third tab </li> </ul> <ul> <li> This matches the fourth tab </li> </ul>
And the matching CSS:
.tabbed_content .slide_content {
overflow: hidden;
background-color: #000000;
padding: 20px 0 20px 20px;
position: relative;
width: 600px;
}
.tabslider {
width: 5000px;
}
.tabslider ul {
float: left;
width: 560px;
margin: 0px;
padding: 0px;
margin-right: 40px;
}
.tabslider ul a {
color: #ffffff;
text-decoration: none;
}
.tabslider ul a:hover {
color: #aaaaaa;
}
.tabslider ul li {
padding-bottom: 7px;
}
Note that the content has two containers. One is for the overall wrapping and the other for making the content move as we hover over the items.
The top container has an overflow of hidden, which makes any content that goes out of it’s limits hidden. The container below that will hold the content that will be hidden.
Now we are going to make the content scroll to the right position as we did with the tabs.
It’s time to fill up the slideContent function:
var margin = $(obj).parent().parent().find(".slide_content").width();
margin = margin * ($(obj).prevAll().size() - 1);
margin = margin * -1;
$(obj).parent().parent().find(".tabslider").stop().animate({
marginLeft: margin + "px"
}, {
duration: 300
});
The margin needed for the slider to move is calculated in this function. It has been made so that you can change the widths of several containers in the result, it will scroll to the right position automatically.
Take another looks at the source for references.
Good luck with making your own tabbed content in your future projects.
Articles like this one
97 Comments
-
Awesome man! I would make the area which determines the slider to move to be the <a> rather than the <div>. If content is too far over to the left then mouse could hit the next sections causing the content to change unwarranted.
Evan
-
Thanks for the comment Evan!
You have a point there. It would increase the usability of the whole concept. Thanks for sharing your thoughts.
-
Very cool! Though, what happens if the user has JavaScript turned off?
-
@Mike: I have no idea… I guess they wont switch :P
-
Hey! Very cool effect you have made. I really like content sliders.
Also going along with @mike If the JavaScript has been disabled then none of the tabs work.
Have a great day!
-tjefford
-
Thanks for the comment Tyler. Maybe the tabs should be clickable if Javascript is disabled.
-
coolllll…
wanna try it
thanks :D
-
Another uber kewl tutorial on GD :)
-
Great example and well executed, thanks for sharing.
-
@Neki, Farrhad and Peter:
Thanks for the comments and good luck with trying it out :D
-
The effect is super slick and pretty original, different from most tabs I have seen. Keep up this kind of material Gaya, I really enjoy it!
As for the flaw with JavaScript being disabled, you could try setting the overflow to hidden with JS and set the default CSS to scroll so the user could scroll through the content. Haven’t tested this, just a quick ide from a glance at the demo and code.
Great work!
-
Hi Drew!
Thanks for checking out the article and commenting! Much appreciated :D
As for the fix to the problem; it is a solution worth trying. Maybe even make the tabs scrollable with them. I sometimes wonder how many people don’t use Javascript these days.
-
Sweet tutorial :) Appreciate all the details.
-
No problem Hiro! Stick around for more ;)
-
Thanks for this work. This is great! Good work!
-
Thank Ahmet! Have fun with it!
-
Thanks for sharing this script, the idea is great. How about converting it into a jQuery plugin?
-
I might make a plugin in the near future :) stay tuned!
-
How do i make it animate when the click of the mouse is done instead of the mouseover function?
-
I´ve just solved this problem I have aked for help just by changing mouseover in the js code to mousedown and it worked perfectly
-
@raphael:
Good! jQuery is really that easy. Glad you liked it :)
-
Great stuff mate, nice to see someone this creative. Everything work like a charm, but in firefox there’s a problem when you insert the . Keep the great job.
-
sorry the image tag
-
Hi dtr,
Are you inserting the image tag inside a ul? that way it should work.
Good luck :)
-
thanks Gaya, it’s a great menu, it’s what i was looking for… i’m using it in my website and looks great
thanks for share it!!
PD: a have little question, when you use the menu and click on a tab link, when page reload, the slide button “.moving_bg” is allways in the first position not showing the new open page.
There is a way to remember the active page, so “.moving_bg” position match with the open page/category?thanks in advance!
adeux, from argentina
-
Looks really nice, just the kind of thing I was looking for thnx for the tut (y)
-
Hi. I think its not comfortable when content links located far away from his title.
-
really nice creative website design.. :)
-
Thanks for your gr8 work. it’s really gr8;
i have one question: can we use iframe under any tab? i tried but its not showing correctly, please check and update us with ur gr8 work :-) thanks!
SiD
-
Have you tried putting the iframe inside a list?
The script was made to move around ul tags. So try to do:
ul > li > iframe
good luck!
-
a very nice slider, simple, efficient, and no click !!!
check your slider here
much thanks from him
-
Hi, i’m trying this slider in my website but it’s not working… I followed every step of the instructions but it seems i’m missing something…
-
Hi, i’m trying to put this slider in my website but it’s not working… I followed every step of the instructions but it seems i’m missing something…Will you please tell me what did I missed.
-
@moabi: Looks cool dude! Glad you liked it :)
@khits: I see you are missing the jQuery file + the AnimatedTabs file gives a 404. Fix these first.
-
Thanks! I like it very, very much!!!
-
This is good stuff! Thank you for sharing. I have just one small problem – it works great with 4 tabs but when I try and extend it to 5 or 6 tabs the content stays withing the original 4 tab width no matter what I do to the content width. Would it be possible to have a few instructions on extending this to more than 4 tabs for those of us who are “CSS challenged”?
-
Wonderful little tool. Wow’d the boss.
I was having a problem displaying 12 tabs. After adding the 5th tab (I was testing as i added each one), they started to double up.
It took a few minutes to realize what was happening, the .tabslider in the css file was set to 5000px. Adding up the width of the tabs comes up to quite a bit more than 5000px, so upped it to 10000px and now it works just fine.
Thanks for the good work.
-
One problem I’m having, I have a couple of GridViews in seperate tabs, and one of the grids is larger than the other.
How would I make one tab display wider than the others??
-
I am interested in using this with the tabs lined up to the left of the content slider above each other. More like buttons than tabs.
Any ideas?
-
Really nice script. I am using in my site.
-
hi Gaya, no matter how much I try to put your animated tab into my blog, i can’t do it. Could you please look at my theme for me, and tell me what I did wrong. I am willing to donate to you if you can make your animated script work into my theme.
-
Looks kool , execellent use of jquery.
-
Great example and well executed, thanks for sharing.
-
Hi, How can you make the content to slide verticaly instead of horizontaly? Thanks
-
gr8 work….the sliding effect is running but the content is not working when i change the tab. :(
-
I found a Bug.
When i include the newest jQuery 1.4.2 from Google Apis, then in Opera 10.53 your Script are Problems.
@gaya: Please test it self with jQuery 1.4.2
-
comment 37: setting 10000px doesn’t work for me
comment 45: I got the same problem, content doesn’t appear at allAny ideas how to solve the above?
-
It doesn’t work in IE8 ;/
-
I would like to have a link inside a tab to go to another tab, keeping the sliding effect. What code should I add ?
-
Really very excellent just imagine many many thanks for posting this.
-
Amazing jquery tutorials, its excellent
thanks
-
Muy bueno.. gracias me sera util
-
Is there a way of seperating the tabs from the content switcher in the jquery?
Having them one above the other really restricts the design, even if it does make for very lightweight coding.
-
Hi
I am using a modified version of this excellent script:
I have it set up to display an individual background image in the main UL content area, along with text sitting on top of the images (for seo).
Upon hover over the title tab, the new content slides into view – but in IE7 / 8 it only shows the first content tab.
This works perfectly in all browsers except IE and I am convinced it is the javascript that is not being correctly read by IE. As you can see, I’ve added the .tabslider arguments – which are correctly read by all browsers except IE.
Being a total javascript newbie – I’m hoping someone here could help me out.
Here’s the script
//tab effects
var TabbedContent = {
init: function() {
$(".tab_item").mouseover(function() {var background = $(this).parent().find(".moving_bg");
$(background).stop().animate({
left: $(this).position()['left']
}, {
duration: 300
});TabbedContent.slideContent($(this));
});
},slideContent: function(obj) {
var margin = $(obj).parent().parent().find(".slide_content").width();
margin = margin * ($(obj).prevAll().size() - 1);
margin = margin * -1;$(obj).parent().parent().find(".tabslider1, .tabslider2, .tabslider3, .tabslider4, .tabslider5, .tabslider6").stop().animate({
marginLeft: margin + "px"
}, {
duration: 300
});
}
}$(document).ready(function() {
TabbedContent.init();
});Here’s the CSS
.tabbed_content {
background-image:url(../images/slide-back1.png);
width: 975px;
height: 400px;
}.tabs {
height: 62px;
position: relative;
}.tabs .moving_bg {
padding: 15px;
background-color:#ff9900;
background-image:url(../images/arrow_down_green.gif);
position: absolute;
width: 125px;
z-index: 190;
left: 0;
padding-bottom: 29px;
background-position: bottom left;
background-repeat: no-repeat;
}.tabs .tab_item {
display: block;
float: left;
padding: 15px;
width: 125px;
color: #666;
text-align: center;
z-index: 200;
position: relative;
cursor: pointer;
}.tabbed_content .slide_content {
overflow: hidden;
background-color: #eee;
padding: 20px 0 20px 0px;
margin-left:20px;
position: relative;
width: 900px;
}.tabslider1, .tabslider2, .tabslider3, .tabslider4, .tabslider5, .tabslider6 {
width: 7000px;}
.tabslider1 ul, .tabslider2 ul, .tabslider3 ul, .tabslider4 ul, .tabslider5 ul, .tabslider6 ul {
float: left;
width: 900px;
height:200px;
margin: 0px;
padding: 100px 0 0 0;
list-style:none;
}.tabslider1 ul {
background-image:url(../images/1.jpg);}
.tabslider2 ul {
background-image:url(../images/2.jpg);}
.tabslider3 ul {
background-image:url(../images/3.jpg);}
.tabslider4 ul {
background-image:url(../images/4.jpg);}
.tabslider5 ul {
background-image:url(../images/5.jpg);}
.tabslider6 ul {
background-image:url(../images/6.jpg);}
.tabslider1 ul a, .tabslider2 ul a, .tabslider3 ul a, .tabslider4 ul a, .tabslider5 ul a, .tabslider6 ul a {
color: #666;
text-decoration: none;
}.tabslider1 ul a:hover, .tabslider2 ul a:hover, .tabslider3 ul a:hover, .tabslider4 ul a:hover, .tabslider5 ul a:hover, .tabslider6 ul a:hover {
color: #aaaaaa;
}.tabslider1 ul li, .tabslider2 ul li, .tabslider3 ul li, .tabslider4 ul li, .tabslider5 ul li, .tabslider6 ul li {
padding-bottom: 7px;
padding-left:40px;}
And here’s the page html:
Cars
Bikes
Trucks
People
Animals
Flags
-
Hi,
This is a very neat bit of code. We are currently using it as a type of “Supermarket Shelf” system on our brand new website.Are there any plans to update it so that if you are not mousing over the “nav” that the content scrolls automatically?
Dave@16i
-
Hi 16i thanks for sharing that – your design helped me understand more about the relationship between this code and images.
… nice site too….
-
I’m very impressed with this tutorial, it’s exactly what I was looking for. However, and this might be really simple, I’m struggling to set different colors for the tab text that isn’t currently selected. (i.e. The name of the tabs that aren’t currently selected).
Can you think of a simple way to do this?
Great work!
alex
-
Please help!
Have a look at http://www.dj-ash.co.uk with CHROME browser…
The text if offset and I don’t know how to fix it!
Works fine with FF and IE…
please email me at info@dj-ash.co.uk if you can be kind enough
thanks
Andy
-
Thank you for this great script.
Could you help me set it up in the following way:
I would like to display some text by default that comes back whenever the mouse is not hovering above a tab.
Any ideas?
Thank you!!!
-
The tabbed content script doesn’t work for me in Chrome. The contents are displaced.
Please have a look at http://www.dj-ash.co.uk
What am I doing wrong ?
-
Great tutorial, This tabs are very very nice for one of my projects, thank you for your help, and congrantulations very nice work.
-
Is it possible to call the change tab section of the code from general javascript in the page – eg based on the an # url var
any help would be appreciated.
Oli
-
Awesome …..! I bookmared it on Delicious and submitted
on Digg. Hopefully it sends more people your way
-
Wonderful! thank you! this script is perfect! i was looking for a long time, and this one is what i needed! :-D
Thanx
-
First of all, thanks a lot for this! It’s amazingly nice, and I’m about to use it on a website I’m creating (it’s a simple website, the only animation is this tabbed view :D ).
Now I read some people wanna know how to change the text color of the tab that’s been hovered on, and I noticed it doesn’t look good if it’s not animated.
As I do not have a domain yet, I cannot show it, I would upload the source code but I’m afraid someone will steal the design or something.
Feel free to mail me at todd.david9@gmail.com though!
-
Hiya,
Great code, I am trying to select middle or right tab by default, can any one kindly help?
Many thanks in advance.
-
“change tab section of the code from general javascript in the page – eg based on the an # url var” << this is the most important feature to add or to explain.
Any idea ?
-
My version of it, please let me know what you think
the render on Mozilla 3.6 is the best one
-
Hey,
great code… i’m trying to use it in my futur website, but i have a little problem…
i’ve put images in tabbed content, and i want to use lightbox on them, but when i put the lightbox.js, tabbedcontent.js stop to work… how can i do? is it normal?thanks!
( i’m french so sorry for my language… :)
-
Very nice, Thank you for effort. Can i change event from mouseover to click?? as some time unintentionally mouse rolled over tab and is selected.
-
height is defined, it takes default height for all the tabs content..
IF first tab has more content, it is taking the same height for other tabs as well even if there is less content…how to assign height according to its content in indivudual tabs,…
-
It is a nice tabbing system, with one huge ironic flaw; “Don’t press the TAB KEY from the last item (highest tabindex) on the current tab!”
What happens is the browser (tested in FF, Chrome, IE and Safari) shifts the content, but only by the amount of space required to show the next item in the tabindex, which in my case is the first input box on the next tab. At that point, changing the tabslider left margin or the moving_bg left margin to correct values has no effect on restoring the screen. The browser, in effect, gets stuck between tabs until you issue a reload of the page.
At first I thought I could compensate for this defect, since I created a routine to position the tabs to any initial tab on a page reload via a $_POST value. But no go. Once the browser gets stuck in between it’ll stay that way.
Go ahead. Check it out with the demo. Repeatedly strike the tab key until it tries to bring the focus to a tabindex on another tab.
I’ve tried a number of techniques involving onKeyPress, etc. but I believe this is beyond my expertise.
In my case, I’m using the tabslider as an input wizard, so the ability to tab from one tab to the next is critical.
It would be nice to have a fix for this problem. It’s otherwise a very handy routine.
Thank for the slider!
-
Hi, great tutorial! Is it possible to have the menu revert to its original position on mouseout?
Thanks!
-
Hey there! This is my 1st comment here so I just wanted to give a quick shout out and say I really enjoy reading your posts. Can you suggest any other blogs/websites/forums that go over the same topics? Many thanks!
-
hi !! it’s great… but….. only work with jquery 1.3 ? :( not work with jquery 1.6 ? or 1.4 ? :(
-
I was pleased to find you script but I am a novice and do not know how to associate each tab to individual content. Is the code you provide generic and needs to be customized?
I spent time on the look and feel by changing CSS settings, but what do I put in the DIV tag to connect with each tab?
Confused… ??
-
OOPS… never mind… haa… it was right in front of me!!
-
Fantastic, i really love this. but, what if i dont want d tab function to change on “hover state”, i want it to change when u “click” on the tab!!! what am i to alter in d jQuary?
-
this is an awesome slider, thank you! im trying to modify it to run vertically and ive edited all the css and everything, the JS i cannot for the life of me figure out… the content is fine right to left, but i wanna make the tabs themselves run top to bottom and i have no idea what im doing?
-
Great blog man, had a lot of great reads! just like to see you update your site now, that would be great!
-
A very nice and simple tool! Is there a way to animate the moving function after a timeoout?
-
When i quite prefer whatever you submit in this article. Extremely useful in addition to smart. Just one challenge though. I’m running Internet explorer having Debian in addition to elements of this present web design portions undoubtedly are a very little wonky. When i understand it’s an excellent normal established. Yet still it’s an issue to help retain in view. When i trust so it can guide in addition to always keep in the prime excellent publishing.
-
Great tutorial, and just a genius bit of jQuery ;) I love looking over people’s code to see what they’ve done and it’s very nicely coded! So SIMPLE. Thanks for the script it’s awesome.
-
How can i make it work in a WordPress page, i tried and it did worked!
-
Some really wonderful posts on this web site , appreciate it for contribution.
-
I concede, I have not been on this site for a long time, however, it was another pleasure to see such an important issues and neglect it. Thanks for assisting making people realize that best issues.
-
It’s best to participate in a contest for one of the best blogs on the web. I’ll advocate this website!
-
Thank you for your wonderful post! It has long been very valuable. I hope which you will proceed sharing your wisdom with us.
-
amazing ,, i like it ,,
-
forums which are above the same subject matter? Thank you!
-
thank you for the idea, is there a way to control the height of each eab content? dynamic i mean, it seem the height is following the highest tab-content. any idea.. thank u
-
How to initializing selected tab? Please help… ;-(
-
‘cute’ it’s really help full
thank you
-
It doesn’t work well. I made 26 tabs (alphabet) and the tabs content are all over the place. It seems to work well until 8th
-
Great!!
But we put some forms into the sliders and after saving always the starting slider was shown. This was a “jumping” effect. If the user fills some data into a slided form it would be nice if that form would be shown after reload.
So I wrote a litte function “gotab” which “goes” to a specific tab.
All you need to do is to put an id in the .tab_item span which needs some positioning:
Termine
To position to the tab “tab-kurse” after saving some data, PHP makes a string $js which is injected into the $(document).ready() at page-building time.
$js = ‘ TabbedContent.gotab($(“#tab-termine”)); ‘;
And here is the gotab function:
(Pleas notice the comma at the beginning, which allows pasting into tabbedContent.js),
gotab: function( obj ) {
var background = $(obj).parent().find(“.moving_bg”);
$(background).stop().animate({
left: $(obj).position()['left']
}, {
duration: 300
});TabbedContent.slideContent( $(obj) );
}
As you see it is a simple variation of init().
@Ron L.: Look in the CSS. Make .tabslider 180000px wide.
-
Thanksz ..a lott,
for your nice “tabbed Content” , really a nice source
-
Hi Peter Klauer, I really need the functionality you made and love using these tabs, but I cannot get it to work using your, would you be so kind as to post up your source files so I can see it in action? I have been trying for hours! Thank you.
Recent comments