Jquery ui tabs how to hide on the page load and then displays when the nav clicked

advertisements

I have a pretty standard Jquery UI Tabs setup working just fine. I even have them linkable. Here is the code:

$('#tabs-set').tabs({
        'select': function(){$(this).index($(document.location.hash));},
        'load': function(event, ui){document.location.hash = ui.panel.id;}
    });

What I want to do is hide all tabs instead of loading the first in the index, then if any are clicked they show.... any ideas?


There's 2 options in the jQueryUI tabs that I would try: First one I would try is not selecting a tab on initialization by setting the selected tab to -1:

$( ".selector" ).tabs({ selected: -1 });

If that doesn't work, I'm not entirely sure what disabled would do, but I would give that one a try:

$( ".selector" ).tabs({ disabled: true });