CODEWITHSUNDEEP
jquery-uitabsjquery-ui-tabs
Julian Kögel
Julian Kögel

Reputation: 23

UI Tabs with all tabs hidden WITHOUT "active: false"

For my design it is crucial that all tabs are closed when the page initially loads. The default is, however, to display the first tab.

These two posts tackled the same question and solved the problem by setting

$( "#tabs" ).tabs({collapsible: true, active: false });

Hide all tabs content jQuery UI tabs onload

Initiate jQuery UI Tabs with no tabs active and all panels hidden

(Since jQuery UI 1.10, there is the parameter active instead selected.) However, somehow this setting conflicts with a slider plugin that is in one of my tabs and also uses the parameter active

Consequently, I can't use active: false or need a way to make the option specific to the tabs only.

I appreciate every help.

http://jsfiddle.net/WRn7q/1/ - with active: false enabled, but without the slider plugin

Upvotes: 2

Views: 2327

Answers (1)

apaul
apaul

Reputation: 16170

I changed $(window).load() to $(document).ready() and then added active: false to the tabs and it worked.

Working Example

//Load Orbit
$(document).ready(function (e) {
    $('#featured').orbit({
        directionalNav: true,
        animationSpeed: 800,
        advanceSpeed: 4000,
        pauseOnHover: true,
        bullets: false
    });
});

$(function () {
    $("#tabs").tabs({
        hide: {
            effect: "fade",
            duration: 500
        },
        show: {
            effect: "fade",
            duration: 500
        },
        collapsible: true,
        active: false
    });
});

Upvotes: 2

Related Questions