CODEWITHSUNDEEP
jquery
curiousk
curiousk

Reputation: 3

Jquery tabs with no tab active by default

I'm using the jQuery below to create tabs on my website (tabs within tabs, to be specific), but I'd like there to be NO active tabs by default. All tabs should be closed when you first visit the page.

I can see the comment about setting the initial active tab below, but I can't figure out what to change/remove to prevent it from doing this. Can anyone help?

jQuery('ul.tabs').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = jQuery(this).find('a');

// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = jQuery($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');

$content = $($active[0].hash);

// Hide the remaining content
$links.not($active).each(function () {
    jQuery(this.hash).hide();
});

// Bind the click event handler
jQuery(this).on('click', 'a', function(e){
    // Make the old tab inactive.
    $active.removeClass('active');
    $content.hide();

    // Update the variables with the new link and content
    $active = jQuery(this);
    $content = jQuery(this.hash);

    // Make the tab active.
    $active.addClass('active');
    $content.show();

    // Prevent the anchor's default click action
    e.preventDefault();
});
});

Live Demo

Upvotes: 0

Views: 682

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Change the following:

$links.not($active).each(function () {
    jQuery(this.hash).hide();
});

To

$links.each(function () {
    jQuery(this.hash).hide();
});

Or remove that code and in css hide all the content which is better for not flashing content before script has a chance to hide it

.tab_content {display:none}

DEMO

Upvotes: 1

Related Questions