How easy to create a slide tabbed box using jQuery

Feedback's a good way to encourage author even if it's a criticize. It's proved you care about the article. Please, leave a comment to let everyone know what you think about this post.

another tip »

Update: I made a new jQuery plugin tabSwitch which automate all the step to make a slide tabbed box and many other style of tabs. So make sure to check it out: jQuery.tabSwitch – tab box couldn’t be any easier

Download the source code

There are so many kinds of tabbed menu nowadays. Still I really like the sliding effect (such as in Coda website). Luckily, thank to jQuery, we could reassembly this effect and trust me it only takes a few minutes (I’m not such a hard-working developer to write something longer then that). As the main tutorial is about Javascript with jQuery, so I will just move quickly through the CSS.

You will need a very basic knowledge about jQuery though, you could find out in jQuery homepage.

I also give extra explanation in the comment to help in case you find it a bit confusing in my code.

Here is the demo.

You could check it out to make sure it’s what you want to do and to make sure you didn’t do it before .

Ok, let start with the theory behind it. The main idea is you put all your tabs in a big div and put it inside a smaller div with overflow:hidden to hide the unused area.

Ok, the basic CSS is :

.ContentFrame
{
    width: 400px; /* This is the size of area will actually display content */
    height:300px;
    overflow: hidden; /* To hide the big div */
}
.AllTabs
{
    width: 12000px; /* This should be the width  of TabContent * number of tab. */
    height: 250px;
    position:relative; /* Position should be relative so we could move it around */
    overflow: hidden;
}
.TabContent
{
    width: 400px; /* This is the side of each tab */
    height: 300px;
    float:left; /* make sure all tab will be in one single line */
}

Ok, I’m not so much of CSS so I think that’s all I could do . Let’s just move to JS.

Now add an event to every tab when the mouse click on it. Then calculate the size of each tab by sum up the width of the div with the margin of it. After we get the width, we multiply the the index of the tab and (–1). Then using jQuery anime to slide the big div to that position.

				$(".container .TabMenu span").click(function(){
					//Remove the exist selector
					$(".selector").removeClass("selector");
					//Add the selector class to the sender
					$(this).addClass("selector");

					//Find the width of a tab
					var TabWidth = $(".TabContent:first").width();
					if(parseInt($(".TabContent:first").css("margin-left")) > 0)
						TabWidth += parseInt($(".TabContent:first").css("margin-left"));
					if(parseInt($(".TabContent:first").css("margin-right")) >0)
						TabWidth += parseInt($(".TabContent:first").css("margin-right"));
					//But wait, how far we slide to? Let find out
					var newLeft = -1* $("span").index(this) * TabWidth;
					//Ok, now slide
					$(".AllTabs").animate({
						left: + newLeft + "px"
					},1000);
				});

That’s it. It’s simple right? Hope it would be useful for you. If you need any information, don’t hesitate to contact me

Some more useful articles for you

Write comment

33 comments
15 trackbacks

March 30th, 2009

Arvind

Hi,
Wat do I need to do if I need t oslide from top to bottom ?

Regards,
Arvind

admin

To Scroll from Top to bottom is even easier. If you check the ImageSwitch/Examples page you will see I did it. You don’t even need a big wide div for all the smaller divs. Unfortunately it’s hard to explain everything in one comments, hope I could release an article about this soon.
In my example I use this code to do it:
$(".ExamplesContainer").animate({top:-NewPosition,1000);

April 9th, 2009

Mark

me likes. thank you!

April 22nd, 2009

Pradeep CD

Great tabbed boxes…

thanks…

May 1st, 2009

Yugi.li

Hello, how can I download the full source of the demo? a zip or rar files.

Please let me know I need to have this for my project. Thanks

HieuUK

@Yugi.li: sure m8, you could download it from here: http://www.hieu.co.uk/examples/slidetabs.zip

May 15th, 2009

Calvin

Hi there. I was wondering about the .js script in the source code of the example page.

Is that .js script necessary to power the jQuery? I don’t see the CSS or JS script mentioned in this post in the .js script itself?

Can you assist?

Hi Calvin, My bad, I didn’t notice it in my post. The .js is the jQuery library itselft. So it’s an essential .js file to run any jQuery web page.

The line:

To load the jQuery into the page.

May 19th, 2009

Francine

Hi there,
I am trying to accomodate your code so that my tabs are sitting on top of the container background.. is it possible?

Thanks,
Francine

May 23rd, 2009

mario

hi, I’m new in jquery and your slide tabbed is so good. But i need a help to put a anchor link inside on the first TabContent to other Tabs.
could you help me? is it possible? thanks a lot !!!

Hi Mario,
It’s surely possible. But to explain it out is a bit complicate in a comment. But if you’re new to jQuery, could you use the tabSwitch I wrote? It could make this slide tabbed and a few other tabbed box as well. And it’s quite flexible so you could control it easily.
http://www.hieu.co.uk/blog/index.php/tabswitch/

lukaa

great joB! but I have one question. Is there any possibility to add “next” ann “prev” button into your script?

May 26th, 2009

Thank’s HieuUk! TabSwitch works wounderfull ! I put the anchor and wrote a switch routine to make the .selector class in Tabmenu go to rel link. Like you’d wrote in slide tabbed. I choose the fade effect and the result is prety good!
thankful again.
sorry for my poor english :^))

May 28th, 2009

Mozer

What do you have to change to add more tabs? Does this only work on 3 tabs?

You could add as many tab as you want. Just need to put more
div class=”TabContent” inside this div class=”AllTabs”

June 10th, 2009

Arie

Thanks for this beautiful script. Is there a possibility to have one of the tabs show up by default (with or without actual sliding)?

June 20th, 2009

Hpandya

Hi – I like your tab box and i am trying to use it – the problem is when you create two copy of your same code when i click on one copy of the tab box link – it also affects other 2 copies of the tab box ,

I want all these three copies of tab box working individually on one page – wt do i change to make it happen,

Please help – i hope this makes sense….

Just like his is working fine http://www.richardcornish.com/

mine do not do that – if you click on one box it changes images on every copy of the box

how do i fix it

June 22nd, 2009

Hi Hpandya,

If you’re only copy and paste the code, it won’t work as it targets the same object id. That’s why when you click a button, all the other copies won’t work. I guess you don’t have much experience in jQuery. I would sugguest you to use the TabSwitch plugin instead. It’s much easier then writing this code yourself.

However, if you want to write the code yourself, you will have to change the class name of the tab. Say instead of .TabContent, you will change first tab to .TabContent1, second tab is .TabContent2…

July 1st, 2009

serkan

Hello, I implemented your code into my web project but the problem is, when Contents start to slide they dont stop untild the end????
what could the problem be???
I could not find

July 3rd, 2009

Joey

So, I’ve been doing a search for coda-esque tabs utilizing the jquery framework and I have one question that really needs to be addressed.

Is it possible to make this less bloated? Why are there so many nested divs? Can’t you just have one div and use p tags inside of that?

Every example I’ve run into uses tons of containers and tons and tons and tons of code. There has got to be a reason I am missing!

Hi Joey, you could use p tags instead of div tag. It works the same way anyways.

I tried to minimum the containers and the code to make it simple. Do you think it’s still long?

If you want to try something short and tidy, try my tabswitch plugin. It’s really simple to use.

July 7th, 2009

gamescrab

jQuery is a very useful tool for web developers – thanks for the tutorial. I added your site to my bookmarks.

August 17th, 2009

Andrew

Hi
I’ve stripped your demo back to the bare essentials and have tried adding more tabcontent divs and tabmenus span (as hrefs), however the content is only visible upto the third tabcontent. Any ideas what’s could be going on here?

September 6th, 2009

Jeff

I need help about your slide tab.
Can you contact me by email ?
Thank you.

September 10th, 2009

banny

hi
tell me some thing
how would u change the position of tab at every page refresh or every new visit like i want first tab to be at last tab next time and last to be in mid and so on thnx

October 4th, 2009

SEO Rab

thank you! i will be back, me likes

October 20th, 2009

Mani

Nice plugin!

I tried to modify that slider but it breaks every time I change something in the css.

Do you know how to have 5 slides instead of just 3?
I tried also to have a width for the whole slider 680px and for the text field height 280px but no chance.
Is it possible to switch the slider tabs with the icons from the top to the button of the slider?

So many questions but I want to use that slider for a very important project. Do you think you can help me?

Thank you for your support

Hieuuk

Hi Mani,

Base on your information it’s not enough for me to fix the problem. I could make it 5 slides and resize the stuff. There are 2 solutions:
1: you could send me a compact html + js script so I could change it for you.
2: You could try to use the tabSwitch plugin which is much easier

Forgot, you could find the tabSwitch plugin here: http://www.hieu.co.uk/blog/index.php/tabswitch/