Vertical tabs without jquery ui

Question

I do not know if I asked this question correctly.

I am looking for examples or guides on vertical or lateral contributions where content is displayed on the side. Like regular tabbed content, but this time on the side (preferably tabs on the left). But it seems that there is not a single information in it, even with the help of Google. Therefore, I am lost.

Or maybe I don’t know the name of this technique.

Also I don't want to use jquery ui for this.

Can someone show me please?

Thank you very much

Answer 1

Without jQueryUI you can do something very simple and clean (demo => http://jsfiddle.net/steweb/zwaBx/ )

Markup:

<ul id="tabs-titles"> <li class="current"> <!-- default (on page load), first one is currently displayed --> first </li> <li> second </li> <li> third </li> </ul> <ul id="tabs-contents"> <li> <div class="content">first content first content first content</div> </li> <li> <div class="content">second content</div> </li> <li> <div class="content">third content</div> </li> </ul> 

CSS

 #tabs-titles{ float:left; margin-right:10px; } #tabs-titles li{ cursor:pointer; } #tabs-titles li.current{ font-weight:bolder; } #tabs-contents{ background:#F2F2F2; margin-left:100px; padding:5px; } #tabs-contents li{ display:none; } #tabs-contents li:first-child{ display:block; /* first one content displayed by default */ } 

JS : (plain jQuery, no user interface)

 var tabs = $('#tabs-titles li'); //grab tabs var contents = $('#tabs-contents li'); //grab contents tabs.bind('click',function(){ contents.hide(); //hide all contents tabs.removeClass('current'); //remove 'current' classes $(contents[$(this).index()]).show(); //show tab content that matches tab title index $(this).addClass('current'); //add current class on clicked tab title }); 

Answer 2

Here is one of many free tutorials: Vertical tabs for jQuery lovers!

Answer 3

I found this in pure javascript without jquery:

http://webdevel.blogspot.com/2009/03/pure-accessible-javascript-tabs.html

Not tested. I also found this one that does not use jquery but uses html5 and css3:

http://www.my-html-codes.com/javascript-tabs-html-5-css3

It seems my most successful search phrase for this topic is “javascript clean tabs” (without quotes, of course). You will find the ones above plus some others if you run this search.

Answer 4

Found an example using jQuery UI

http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html

If you look at the source, it seems that they just add a class that positions it vertically, not horizontally.