enable disable jquery tab

Question

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>

score 5 · Answer 1 · answered Oct 09 '12 at 00:30

5

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;
});

answered Oct 09 '12 at 00:30

Gaʀʀʏ

4,372
3
39
59

1

For the disable to take effect, make sure this tab is not currently selected from previous display. I had to un-select the tab I was going to disable in order to show properly (if the tab was active (selected) it will still show even if programmatically disabled ` $( "#tabs" ).tabs( "option", "selected", 0 ); $("#tabs").tabs({disabled: [1]});` – Carlos Garcia Apr 29 '13 at 19:51

score 2 · Answer 2 · answered Apr 14 '11 at 14:05

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.

score 0 · Accepted Answer · answered Apr 14 '11 at 10:43

0

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

answered Apr 14 '11 at 10:43

amustill

5,274
23
15

Exactly this is the requirement. But I have not used the default jquery tab, in my case tabLinks.eq(0) or tabLinks.eq(1) is not working. So how should I select the second tab? – Krisanu Apr 14 '11 at 11:13
There isn't any default jQuery tab functionality, unless you used jQuery UI Tabs, but sometimes that is overkill. The 'tabLinks' is simply a variable I've set that contains the elements from the selector $('#tabs a'), so that I don't have to repeatedly call this selector. A way of caching if you will. '.eq()' is just another way of filtering elements, similar to ':first', starting with 0 meaning the first element (http://api.jquery.com/eq/). I've amended the example to use your markup, so perhaps it makes a little more sense: http://jsbin.com/ijoco5/2/ – amustill Apr 14 '11 at 11:35

score 0 · Answer 4 · answered Apr 14 '11 at 12:27

0

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>

answered Apr 14 '11 at 12:27

Dharmesh

1,039
1
12
17

enable disable jquery tab

4 Answers4