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..

    Showing images conditionally

    how to make layers not overlap with each other in css [closed]

    how to restrict the children element inside the parent element in css?

    How can I show entered password using tooltip on input type=password in bootstrap?

    Using CSS, how can I change the alignment of a click-to-open UL menu?

    How to make a div fall on hover and stay at at the bottom of the page using jquery or css?

    How to position background image in a button

    How to change iframe pages without the parent page changing with external links using CSS

    How animate stacking divs in javascript/css?

    How do I keep floated child divs from wrapping?

    How to fully stretch 2 embeded divs?

    codaSlider hack - how do I add little triangles overlaying an image

    How to display image in sidebar-wrapper css class

    CSS: How to make single div of multiple divs within a div show on the bottom

    How can I convert an absolute file path to one CSS can use?

    How to make colspan work without affecting width of the other rows

    How to indent text in a select drop down menu using CSS

    in slick slideshow, just want center slide to be active

    How to change the color of header?

    How to position element as fixed in relatively positioned container?

    How can I modify footer color dynamically when I switch to another page in html and css

    How to center this element in css

    How to select the parent's parent in CSS?

    How do I implement this basic CSS for just one category?

    How to get border radius and gradient background working together in IE 9

    How to organize css files in a Joomla 2.5 template? [closed]

    How to create a texture paper background using CSS without image

    how to prevent link padding during hover from extending paragraph padding

    How Do I make this JQuery window have a minimum size?

    How to get two CSS rating star widgets to not affect each other when clicked