CODEWITHSUNDEEP
jquerytabsjquery-tabs
Krisanu
Krisanu

Reputation: 43

enable disable jquery tab

I have a jquery tab container, in which there are two tabs. Now what I want is initially second tab will be disabled. On clicking a button on the first tab second tab will be enabled and open automatically.

<script type="text/javascript">
    $(document).ready(function() {
    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        });

      });
</script>

<div class="tab-wrapper" id="tab-wrapper">
    <div class="tab-header">
        <ul class="tabs">
                <li><a href="#tab1">overview</a></li>
                <li><a href="#tab2">details</a></li>
            </ul>
    </div>
    <div class="tab_container">
            <div id="tab1" class="tab_content">
                here is the list of the overview
        </div>
            <div id="tab2" class="tab_content">
                Particular Details
            </div>
        </div>
</div>

Upvotes: 3

Views: 26594

Answers (4)

Gaʀʀʏ
Gaʀʀʏ

Reputation: 4540

You can use the following

$("#tabs").tabs({disabled: [0,1]});

And use the zero-indexed numbers to choose which are disabled. To enable your tabs you can use this:

$("#tabs").tabs({disabled: false });

For setting the selected tab, you can use this example from jQuery Tabs:

var $tabs = $('#tabs').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

Upvotes: 5

Tanner Ottinger
Tanner Ottinger

Reputation: 3060

I would disable all of them by default, and then enable the first one. After that, the button should be pretty simple. All of this should be pretty simple.

First: jQuerys tabs('disable') just doesn't work. So I built my own function to disable them all. Here that is: 

function disableTabs(obj){
    var c = obj.find("ul li").size();
    for(var i=0;i<c;i++){
        obj.tabs("disable", i);
    }
}

You can use it like this: disableTabs($('#myTabs')). jQuery doesn't allow you to disable the current tab - and since this is going on page load, it's going to be the first one. Then, you will need to make some variables to store some data...

var openTab = 0;
var currTab = 0;

Then, a couple of functions to handle it...

function enableTab(obj, num){
    obj.tabs("enable", num);
}
function next(){
    openTab++;
    currTab++;
    enableTab($(".tabs"), currTab);
    $(".tabs").tabs("select", currTab);
}
function prev(){
    openTab--;
    currTab--;
    $(".tabs").tabs("select", currTab);
}

Then , we just attach some event handlers: 

$('#myTab').bind('tabsshow', function(event, ui) {
    currTab = ui.index;
});
$(".next").click(function(){
    next();
});
$(".prev").click(function(){
    prev();
});

The HTML for those buttons is really simple:

<a class='prev'>Previous</a>
<a class='next'>Next</a>

Hope this helps - and good luck!

BTW: I have some full working tabs up here that you might want to look at.

Upvotes: 2

Dharmesh
Dharmesh

Reputation: 1049

Assuming you are clicking a button which is not a inside tab class and want 2nd tab to open then you can add trigger event like :

$('.tabs > #tab2').trigger('click');

And give id to li > a : <a id="tab1" href="#tab1"></a>

Upvotes: 0

amustill
amustill

Reputation: 5302

The way I would tackle this is to use a variable that tracks whether the button has been clicked, setting it to 'false' by default and 'true' when the button has clicked.

Checking the value of this variable within the click event of the tab links will then allow you to decide whether to show the new tab, do nothing, or perhaps show a message.

Here's a working example: http://jsbin.com/ijoco5

Upvotes: 0

Related Questions