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
});