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/


    CSS Howto..

    Does anyone know how to create this 3d flip animation via CSS?

    How do I make the .left class appear below the header but keep the header position as fixed?

    How to Make Text Stay Inside Div?

    How to CSS div 100%

    Is it possible to compress LESS CSS files with htaccess? (and how to?)

    WordPress TwentyTen menu: how to CSS-select sub-menus in a specific position?

    How to highlight a whole table cell with padding when hovering?

    Using Bootstrap, how can I put divs in different rows depending on the breakpoint?

    How to make fadeIn() and hide() work only for tablet and desktop versions?

    How to handle this CSS issue with Wordpress?

    How to style Anchor in GWT?

    How to make a img flicker using css(should work in all browsers)

    ASP.NET - how to use CSS to align ASP.NET controls in a data entry situtaion?

    How to create dynamic CSS class in in extjs or javascript

    GWT: How to catch what code overrides the CSS cursor value. Or why it overrides?

    How do you contain and position an input with a div?

    Thai line breaking: how to break Thai text effectively

    How to make the div's appear inline in the following code?

    How to center a div tag in a html page without being affected by zooming

    How to locate a pointed div element in css

    How add symbol in CSS for element?

    How to fill 100% of an absolutely positioned div? (IE7+) [duplicate]

    how to embed css in sass, or use + selector in sass?

    How to display parent form when input text is on focus?

    Using CSS, how to create a two-column grid with equal-width columns that are “only as narrow as required”?

    How to make sure items are added to the end of a moving list?

    How do I style JUST the reflection of the content without affecting its original source?

    How to apply CSS class on current element using jQuery

    How to use fadeIn with css property change jquery

    How to test browser performance of specific CSS property?