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

    How to center body on a page?

    How to apply format depending on absence of a CSS class?

    How can I target a block after another block with css?

    CSS: How do I get my “send” button to line up (move up) and size up (scale) properly?

    How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?

    When styling XML with CSS, how to refer to tag names that contain periods or colons?

    Showing images next to paragraph

    How to create an infinite Sign Trajectory using CSS animation?

    How to manually apply styles from particular style sheet to an element?

    How to over-ride img-width from bootstrap? Set css rule to null?

    How do I center text in a span?

    How to configure a child div to display scrollbars only when a parent div percentage settings require it

    using css modules how do I define more than one style name

    How to hide elements with css using checkboxes: different outputs according to element id or class?

    How to override css-setting for the elements of nested table?

    How could I add a header to a HTML page via CSS?

    How to fix the Wordpress (Twenty Eleven) CSS Menu Alignment?

    how to indent html output using CSS

    How can I set the Eclipse JS to edit a file as CSS

    How to play a second CSS animation once the first one finishes

    How to cancel specific one element at external CSS?

    how to display nav elements below each other inside of a header element

    How to draw a border around a semitransparent image? (css) [duplicate]

    how to arrange divs with css as a grid?

    Flexbox: how to get divs to fill up 100% of the container width without wrapping?

    How to change font-awesome icon color when it is active

    How do I align text to the middle of an element with CSS in Twitter Bootstrap?

    css - why my text box is not showing up?

    How to create a standing up 3D text effect with Css3 transforms

    How to create a custom vaadin component in vaadin 6