How to make JQuery + CSS Verticle Tabs

Tags: jquery,css

Problem :

Having trouble with my tabs, the Jquery is not functioning as i expect it to.

Im trying to create verticle tabs to display different information, but my jquery is not functioning.

1. I am trying to hide all the divs except the first one.
2. Then when one of the tab lists is clicked the active class gets added to that and removed from the other.
3. finally hide all the divs and show the one which was clicked.

Click for jsfiddle demo

   $(document).ready(function() {
    tabContent();
})

function tabContent() {
    $('#tabsD div:not(:first)').hide(); 
    $('#tab-container li').click(function(event){
        var id = $(event.target).index();
        $('.active').removeClass('active');
        $(event.target).addClass('active');
        $('#tabsD div').hide().eq(id).show();
    });
}

---

Solution :

Use this -

var id = $(this).index('li');

Demo ---> http://jsfiddle.net/HjYZ6/6/