Question

I have the below code to display tabs. The tabs work when I click on them but not on page load (it shows the content of all tabs). I also need to be able to open all 1st/2nd or 3rd tabs on the page with a click of a button (multiple tab groups on the page)

$("ul.tabs").each(function() {
    $(this).find('li:first').addClass("active");
    $(this).next('.tab_container').find('.tab_content:first').show();
});

$("ul.tabs li a").click(function() {
    $(".tab_content").hide();
    var cTab = $(this).closest('li');
    cTab.siblings('li').removeClass("active");
    cTab.addClass("active");
    cTab.closest('ul.tabs').nextAll('.tab_container:first').find('.tab_content').hide(); 

    var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

​
jsfiddle.

I’m also open to other tab solutions.

Answer 1

http://jsfiddle.net/agBgL/1/

You just need to hide tab content initially.