Hello folks,
Well, I was just wondering how to start this post and how to write words worth a thousand pictures. However, I believe giving a jQuery plugin a live try, worthes a thousands words. So, hover below and give Vertical Tabs a try.
If it suits your needs, read on.
Welcome Home!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum tincidunt
metus, vitae porta elit mollis eget. Sed id nisl nec lorem tincidunt sodales. Etiam
a dolor tellus, vel rhoncus ligula? Duis adipiscing vehicula urna ut pellentesque!
Duis eleifend lacinia diam a rhoncus. Integer viverra dolor eget eros consequat
facilisis. Curabitur dignissim dignissim lacinia!
Sed bibendum velit et magna placerat bibendum. Donec vitae leo ante. Nulla semper dapibus felis et luctus. Donec congue, lectus eget ullamcorper sagittis, orci enim aliquam risus, eget adipiscing quam neque sed eros. Donec commodo nisi varius augue lacinia pharetra. Cras lacinia fermentum luctus. Nunc venenatis commodo lorem, vitae pulvinar neque dignissim sed. Proin blandit rhoncus risus, sit amet eleifend quam
eleifend sed.
Secure Login
Online Support
Maecenas in varius nulla. Morbi leo elit, volutpat ac faucibus in; aliquam eget
massa. Nullam a neque ac turpis luctus venenatis et placerat risus. Quisque pretium
scelerisque sapien, et accumsan nunc venenatis non. Donec ullamcorper, leo gravida
hendrerit interdum, tellus nisi vestibulum justo; quis dignissim enim risus quis
ipsum.
Mauris fringilla, urna vitae posuere commodo, neque tellus tincidunt nisi, aliquam scelerisque purus nulla ac enim. Cras urna urna, vestibulum ut aliquam sed, laoreet et justo! Vestibulum eleifend porta mollis. Donec molestie, turpis sed commodo consequat, erat purus sollicitudin arcu, non vestibulum risus lacus ac ipsum. Curabitur vitae pellentesque purus.
There are 3 steps to (almost) every jQuery plugin: the HTML, the CSS and the JavaScript code.
Step 1. The HTML
<div id="vtab">
<ul>
<li class="home"></li>
<li class="login"></li>
<li class="support"></li>
</ul>
<div>
<h4>Welcome Home!</h4>
HOME CONTENT
</div>
<div>
<h4>Secure Login</h4>
LOGIN CONTENT
</div>
<div>
<h4>Online Support</h4>
SUPPORT CONTENT
</div>
</div>
There’s nothing special about this HTML. It just uses a div, that’s being identified by vtab, where it contains two elements: An unordered list that represents the left-side tabs, and a 3 different divs, each of which is associated with a given list item. For example, the first div indicates the content of the first tab, say, that’s being marked with home class. If you need more tabs, you can easily add them to the above HTML structure.
Step 2. The CSS
#vtab {
margin: auto;
width: 800px;
height: 100%;
}
#vtab > ul > li {
width: 110px;
height: 110px;
background-color: #fff !important;
list-style-type: none;
display: block;
text-align: center;
margin: auto;
padding-bottom: 10px;
border: 1px solid #fff;
position: relative;
border-right: none;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
}
#vtab > ul > li.home {
background: url('home.png') no-repeat center center;
}
#vtab > ul > li.login {
background: url('login.png') no-repeat center center;
}
#vtab > ul > li.support {
background: url('support.png') no-repeat center center;
}
#vtab > ul > li.selected {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
border: 1px solid #ddd;
border-right: none;
z-index: 10;
background-color: #fafafa !important;
position: relative;
}
#vtab > ul {
float: left;
width: 110px;
text-align: left;
display: block;
margin: auto 0;
padding: 0;
position: relative;
top: 30px;
}
#vtab > div {
background-color: #fafafa;
margin-left: 110px;
border: 1px solid #ddd;
min-height: 500px;
padding: 12px;
position: relative;
z-index: 9;
-moz-border-radius: 20px;
}
#vtab > div > h4 {
color: #800;
font-size: 1.2em;
border-bottom: 1px dotted #800;
padding-top: 5px;
margin-top: 0;
}
Well, the style sheet is simple. However, it’s somehow tricky since I needed to hide the right border of the selected tab. The trick is that I just move the content’s div to a layer index that’s being positioned below the selected tab. This way, the selected tab will be placed over the content and the right border will be gone. The rest is fairly straight forward.
There’s still one more thing to mention. And that’s the support for IE7. Here’s the CSS that’s being used to address IE7. The important thing here is the z-index of the tabs contents:
#vtab > ul > li.selected{
border-right: 1px solid #fff !important;
}
#vtab > ul > li {
border-right: 1px solid #ddd !important;
}
#vtab > div {
z-index: -1 !important;
left:1px;
}
Step 3. The JavaScript
And here comes the fun part:
var $items = $('#vtab>ul>li');
$items.mouseover(function() {
$items.removeClass('selected');
$(this).addClass('selected');
var index = $items.index($(this));
$('#vtab>div').hide().eq(index).show();
}).eq(1).mouseover();
Please note that the tab icons are copyrighted material and they are provided for demonstration purposes only. If you like them, you can buy them at fotolia.com.
Finally, for your convenience, I’ve zipped up all the necessary files into a single package. You can download it here.
That’s all for now, folks!
If you enjoyed this article, please consider sharing it!
104 Responses to ‘Vertical Tabs’ for jQuery lovers!
Leave a Reply
Circle up with me on Google+
very nice! I plan on altering it slightly to fit my needs, where it is a .click instead of .mouseover. However, I was wondering if it would be possible to pass in a tab/list name via the query string and have it default to that tab upon rendering? Is that possible, and would it require altering the current jquery function or creating another function to handle that?
thank you
Hi,
Well, all you need to do is to change the code as follows:
var $items = $('#vtab>ul>li'); $items.click(function() { $items.removeClass('selected'); $(this).addClass('selected'); var index = $items.index($(this)); $('#vtab>div').hide().eq(index).show(); }).eq(index_obtained_from_the_querystring).click();where “index_obtained_from_the_querystring” obviously should be replaced with the zero-based index taken from the query string.
Hope this helps,
Mehdi
I’m new to all of this, how do you find the zero-based index?
don’t worry about the “index_obtained_from_the_querystring”. Just write down the index of the tab you want to be selected on load.
For example, write “0” to start with the first tab selected
Thanks, I think I’ll give this a try. A few questions:
1. The two lines below appear to apply opacity to IE, but I’ve never seen anything quite like them. Would please explain what they’re saying?:
2. Does the opacity work in IE6?
3. I’m under the impression IE6 does not recognize first-child selectors which you have used extensively in the CSS. Does the CSS actually need those first-child selectors, or would it work just as well regular child selectors?
Hi,
1. To understand what DXImageTransform does and how do filters and transitions work, you need to have a look at this article.
2. Yes, the opacity (mentioned above) works in IE6.
3. Well, they are not actually a necessity and can be easily replaced with “class selectors”… Please feel free to change it as you wish.
I would like to use this as a navigation element, so it’s important to be able to include a link in each list item. Please tell me if this is easily doable:
I would like to have the list (tabs) be a list of links, similar to the way the html is set up in Themeroller http://jqueryui.com/demos/tabs/ so that I can send someone a link to a specific tab (e.g. http://www.index.com/tab-3), and that div will be the first one visible when the page loads (and the other tabs can be accessed after that). But I would also like to have the first tab load by default if no ID is specified in the link (e.g., if the URL is http://www.index.html).
Is this possible without too much work on your part or mine?
Thanks for the quick reply to my first question! I just posted a second one before seeing your reply. I hope you can answer that one quickly, too.
Oops, I mistakenly referred to ‘first-child’ and ‘child’ selectors in my first question, but what I meant was you had used ‘child’ (not ‘first-child’) selectors and I was wondering if simple descendant selectors would suffice. I would actually prefer to use the child selectors rather than assign classes, but I thought they didn’t work in IE6.
This is really cool, thanks for sharing. I am curious though, in playing with it, no matter what I do, the second tab (in the demo it’s “login”) is always selected, even though the first tab has a “class=home selected.” How do you make this so that the first tab is the default “selected” one?
Again, thanks for sharing, this is really great.
The second tab is selected in this line of code:
where 1 indicates the zero-based index of the selected tab. i.e., if you would like to select the third tab by default, you could just replace the .eq(1) with .eq(2). This way, the third tab will be selected when the page gets loaded.
Hope this helps,
Thank you! This is AWESOME!
Great! Just what I was looking for. I appreciate your work on this. Quick question what is the easiest way to have it swap out an image on rollover rather than do an opacity setting? Thank you for any assistance.
Jen
I saw this is a great tuts suitable for 2 thumbs
thanks and nice to find your site
Hi,
I would like to apply for selected class, custom classes (different icons defined in that classes). Can you please help me with this problem?
Thanks!
However, thanks for sharing, nice work! 🙂
Hi,
I’m also interested to swap an image (defined by css classes). It’s possible?
However, thanks for sharing.
it not working in ie6!
anyone got solutions yet?
please share…
That is a great tut!! Thanx.
In IE6, only the topNav Div of your page is visible. Its like that in all of your site’s pages.
Well, IE6 died the morning of March 1, 2010 in Mountain View, California. 😉
It seems that you missed the funeral!
It runs on all browsers except ie7. Any suggestions to make it work on all browser. I tried removing the comments for ie7 but then it didn’t work at all.
I copied and pasted all your code into the following page and I have run into a problem it can be found here – http://theofficialhorseloversclub.webs.com/index.htm
The tabs are not merging together… =
This is really very nice! Thanks for sharing. using your files and previewing in all browser works. However I used php includes for my top and bottom page and have used the CSS If link statement on on top inlcudes php page. It just doesn’t seem to work for IE7 but was ok for rest of browser. Any ideas?
Hi Medhi,
Interesting post, I plan on altering it to fit my needs. I was wondering, how can I modify the js code so when I onmouseout it make disapear the div on the right ?
Hi.
I found your code very useful! Great job 🙂
I was wondering if is anyway to put the images on top and not on the side…
Thank you in advance.
Hi. In IE8 bugs. Any way to fix this?
Thanks!
This is very cool.
In IE 7 both in your demo and in my version you cannot click in a form field to select it. It seems you can tab into it but that is not a great solution.
Any thoughts?
Thanks!
Just figured out my question on not being able to click the tabbed content in IE7. The css you are using for IE7:
#vtab > div { z-index: -1 !important; left:1px; }This z index puts the content below and there for yo cannot click it. I change the z-index to a positive number and now it works fine.
Can you explain why you added that css? Thanks!!
Thank you so much. Can’t believe the trick could be done so neatly and simple in its way.
thanks for sharing…
http://www.raghibsuleman.com/
Hey, Is there a way out to get around the rounded corners in IE.
Great post. Had z-index issues, so in case anyone has the same issue, here’s what my IE7 code looks instead of what’s in the post. Basically, instead of moving the divs BEHIND the ul, I moved the UL to ABOVE the divs. By ABOVE and BELOW, I mean in the z-index order.
#vtab > ul { right: 1px; z-index: 10; } #vtab > ul > li.selected{ border-right: 1px solid #fafafa !important; } #vtab > ul > li { border-right: 1px solid #ddd !important; }Hi Mehdi,
Thanks for sharing this. I’m using it, and I modified it to click instead of mouseover… but I would like to have it so there’s a hover effect on the other links (without changing the content).
If you could help me with that I’d really appreciate it. (I tried to contact you privately but I couldn’t find a way to do that)
-lily
Hi,
i have a problem to load correctly google maps into jquery vertical tabs. It
loads the map but show only the half map into the viewable area.
If you could help me, i would appreciate it.
Thank you,
Vivi
not working
That’s great source code. 🙂
Hi, this is very nice script.
But I have a question. How can i do LINK a tab to another page? I mean that, on mouse over i want to open a new page and not the tab.
Thanks!!!
Hi and nicely done!
Is there any way to get rounded corners everywhere?
there’s actually a problem whenever u have an element inside the tabs that has
‘clear: both’ property that makes a large gap. making the #vtab > ul absolute will fix this issue instead of relative
Thank You for this post. I am very new to web developing and would not be able to write something like this. Thanks to you my school project looks so much better
Fantastic post, I was wondering if you could modify it to cycle through the tabs rather than having to hover over them.
Thanks for the tutorial.
It’s great to seperatate the HTML and CSS in this way.
Is the “opacity” displayed right in every browser?
You have probably noticed that there are 3 different attributes to address the opacity in my CSS:
Each addresses a certain browser(s). You may also need to add the -moz-opacity to the css for Firefox 2 (I’m not sure though).
Good luck
Nice work I am trying to use this in an asp updatepanel and the page loads fine the first time but when you do an asynch post back the divs are not on top of each other any more they are listed on after another vertically, any suggestions?
Great Tuts…,its very useful in my project…
Tnx and please upload more tutorial..,
does anyone know how to set up a hash tag system? So when you click on a specific tab it adds a hash tag to the url?
Hi Mehdi,
Thanks for sharing this. I am using it now 🙂
Very nice, thanks very much!
Hi!
First, sorry my english.
i have a problem when i try put in the DIVs, anothers Divs… how can i fix that problem?
I lost the borders…
Thanks.
sorry, I fix the problem. Thanks anyway.
Hi. How were you able to resolve for div within the div?
Thank you
Super post… thanks a lot!!!
I am very pleased with all the articles on your site. I get a lot of tips which helped me too.
I’m having a form inside the tab and it’s not letting enter anything. Do you have a workaround for this?
Hey,
I have everything working nicely, but i want to change the tab image on hover as opposed to just a background color change.
I’ve tried using the same syntax as the regular state buttons seen below. I’m not sure if I’m missing anything or its just not readily possible. Any help would be greatly appreciated!
#vtab > ul > li.selected .tab1 {background: url('../images/homepage/vtab_btn_usedgolfclubs_over.png') no-repeat center left;}Love the tabs!
please disregard.. i’m a little slow today apparently.. but the tab is defaulting to the 2nd tab as selected, why not the first?
The second tab is selected in this line of code:
where 1 indicates the zero-based index of the selected tab. i.e., if you’d like to select the first tab by default, you could just replace the .eq(1) with .eq(0).
Hope this helps,
Great post!
I do have similar problem though as #beto with another div inside. Specifically, trying to add tab tabsearch and pager.
Thank you
Roman
Would you please share the HTML/CSS portion of the Vertical Tab you are trying to construct? Something has to be wrong with the CSS you are trying to apply.
I posted the code. Just confirming whether you got it.
perfecto, lo que andaba buscando
دست گلت درد نکنه
I have a question. Is there a way to link from a top navigation to a specific tab. For example. If my top nav says “about us/ mission & vision / contact us” and these are the same titles i have on the vtab and i click on the contact on the top nav, the code takes me straight to the contact us tab.
Thanks for your help
Just wondering if anyone has got this working in IE6, or at least implemented a way of it degrading gracefully and the tabs content still being readable by the user.
Thanks.
This is a-grade css mate. Thanks for this! Saved me a few hours today 🙂
Thanks, Great…
I copied and pasted all your code into the following page and I have run into a problem,The tabs are not merging together and I don’t know where to correct the mistake.
In my html code the , once saved, doesn’t show.
any sudgestions on what I can do will be appreciated
This works great, and modifying it is straight-forward. I use jquery load to populate divs, with an animated “busy” icon replacing the tab image if the load time exceeds 0.5 seconds. It looks cool. One issue I’ve run into – perhaps you can help. One of the content pages being loaded includes a jquery ui tabs control. Even though I execute the .tabs method after the load is complete, I’m not getting the tabs. Now I’m not trying to suck you into an exchange about the jquery ui tabs control, but I’m wondering if, since it too uses modified ul/li constructs, it might be going south because of the “#vtab > ul” and “#vtab > ul > li” css.
It’s always useful, after struggling for hours to decipher weirdness, to post a reply as I just did, because inevitably the solution is discovered within minutes of clicking a “Post Comment” button. My bad! Problem solved. Regardless, I am indebted to you for your approach. It was precisely what I was looking for.
I have an issue with the tabbed content when the active tab content element is very long, the container where the tabbing element is placed does not recognize the height and does not slide down the footer (so the effect is that the tabbed content goes over the footer itself). I think the problem is because the main container of the website does not recognize the hidden content of the tabbing element and so does not dinamically slides down the footer when that content comes active.
Is there a workaround for this issue?
I hope I explained well the problem
Thanks
Peter
Magical. I’ve incorporated into an intranet site I’m building – works great – I’ll get a “wow” from the boss. Thanks much!
Someone asked about having the tabs at the top instead of the left side. Any ideas ? I have a long list of tabs (pics) on the left side and have to scroll to the bottom to click on the last tab and then scroll back up to read the content, is there any solution to this ?
Thanks for posting. I’ve been researching how to create vertical tabs in Jquery without too much trouble (not a JQUERY expert) but found this tutorial to be perfect. Well written and tight code. Thanks for sharing with the community!
Cool! Amazing tabs, thanks!
Hi,
Nice tutorial.. I am facing one problem … I am placing tables into div and it’s creating some gap after the test and above the tables … like this :
Test
——-
table-1
table-2
if i use instead of table then there is no problem in your code …can u give me any suggession?
Regards,
Reza
Hi. This is a great code and thank you so much for posting it. I was wondering if you know why iframes are not supported? Do you know of a way to resolve this? Also, like reza, tables seem to be a problem area. Any help would be appreciated.
of course, the iframes inexplicably start to work as soon as I post the question. Still no luck with the tables through…..
Hi,
great post!
I’d like to put the icons on the right. Someone can help me?
Thanks,
Francesco
Hi Mehdi:
i would like to show 2 lists on my page; one for speakers and one for facilitators. there speakers are currently only 3 speakers and a lot of faciilators When i place the 2 instance of vtab, of course i run into a problem. so i decided to create standard tabs and place the vtab in each tabber. it works and it doesn’t.
because the index is set to display (0), when user clicks on the familitator tab, none are defaulted to appear.
here’s a link to the page: http://www.tc2.ca/cmsms/index.php?page=featured-speakers-and-facilitators
is there a way to show 2 sets of vtabs on the same page?
Is there a way to add sliding transitions between the tabs on this?
Using this on my next site and would love to add transitions.
hi, i have not heard back about multiple vtabs on one page?
Great. thank you
Hi,
Very nice tutorial, can we add Tabs at runtime by adding some buttons and default content in the tab contents…..
I replaced the images in your example with text and users if IE on a Windows machine are reporting that the text looks jagged (which I cannot recreate because I am on a Mac). I was hoping that you might have an idea of why this is happening. This is great stuff.
Thank you
Hi – I am completely new to jQuery. Can someone please point me in the right direction on how to use these files? thank you so much.
hi !
thanks
Hi, I am trying to have a link from another page go to a specific tab on the page containing the tabs.
The website is
http://www.allus.ca and I am trying to get the links on the home page go to their respective tabs on the services page.
Any help would be appreciated.
Thank you
the best m8 🙂
[…] Демо […]
thank you alot for this post.
Just one question. I use twenty tabs on the left, but how to make the right div is 100% of the height of all tabs?
Thank you again.
I’m trying to nest another set of tabs inside the first but I am having trouble. Does anyone have an example of nesting these tabs?
Hey! Thanks alot for this cool menu! it works perfectly on chrome,
but i have problem with IE9 – when i put links on the pages,
IE9 simply won’t let me click on them. the links works only on chrome.
any way to solve this issue ?
thanks alot,
yaniv
I am new to jquery. Can you tell me what line 7 and 8 in your java script does?
$(‘#vtab>div’).hide().eq(index).show();}).eq(1).mouseover();
[…] Демо […]
hi..thanks a lot… cld you please explain how to add sub-menus in the same sample, instead of image i am looking for menu tree… say 3 main menu and 3 sub-menus… while clicking the main menu,sub-menu should open and sub-menus wld have content that wld appear in the div/tab area at the right side….
First of all thanks for the post,I want to display tabs with curvey edges,Is it possible?
Doesn’t work on IE 7… nothing is shown in the content… I’m using IE 10 in W8, but tried this before using in my code, changing the explorer mode
Sorry, the script Works fine, it’s just this page that doesn’t work, I think you didnt add the css for IE7
Hi
I am trying to implement this into WordPress. I have it working, but when the page first loads I see all the div contents, then when I click on one of the links it sorts itself out. I am usin inline images within the tags instead of background images.
Any ideas how I can just show one div content when the page loads?
Many Thanks
Hello
I have sorted the content divs all showing at once. Anyone not comfortable with adjusting code like myself, I used the following after changing the mouseover to a click function
$(function() {
var $items = $(‘#vtab>ul>li’);
$items.click(function() {
$items.removeClass(‘selected’);
$(this).addClass(‘selected’);
var index = $items.index($(this));
$(‘#vtab>div’).hide().eq(index).show();
}).eq(0).click();
});
index_obtained_from_the_querystring, meant nothing to me, I only found the soultion through trial and error for an hour or two!!
First off, thank you so much for posting this! It has been greatly helpful.
Is it possible to have more than one set of VTabs per page? I’ve seen that requested in the comments before… I’d love to see a working example of how this would work.
Thanks in advance!
Thanks for any other magnificent article. Where else may anyone get that type of info in such an ideal manner of writing? I’ve a presentation next week, and I’m on the look for such information.
Normally I don’t learn article on blogs, however I wish to say that this write-up very pressured me to try and do it! Your writing taste has been surprised me. Thank you, quite nice post.
Hi, this tab is awesome. Is it possible to do not show any content until I mouseover a tab? I know you can choose what tab is going to be shown when page loads, but I dont want to show anything. Is it possible?
Thank you so much!