vertical tabs without jquery ui

Question

I don't know if I'm in the right place to ask this question.

I'm looking for examples or tutorials of vertical or side tabbed content where contents appear on the side. Like normal tabbed contents but this time sideways (preferably tabs on the left). But it seems that there's not a single thing about it online even using Google. Therefore I'm 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 the way please?

Many thanks

Answer 1

Without jQueryUI you could do something very easy and clean like this (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: (simple jQuery, no UI)

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's one of many free tutorials: Vertical Tabs for jQuery lovers!

Answer 3

I found this one in pure javascript with no jquery:

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

Haven't tested it yet. I also found this one that uses no jquery, but leverages 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 "pure javascript tabs" (without the quotes, of course). You'll find a those above plus some others if you run that search.