CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
Daniel Hutton
Daniel Hutton

Reputation: 1455

Jquery UI tabs disabled on load

I currently have this code:

    $( ".feature-tabs" ).tabs( 
{ collapsible: true, fx: [{opacity:'toggle', duration:'slow', height: 'toggle'},   // hide option 
{opacity:'toggle', duration:'slow', height: 'toggle'}]}); // show option

and I want to set the tabs to be disabled when the page loads but I am having trouble with it. I have tried adding disabled:true into the options but can't get it to work.

Could someone please show me the correct way to do it? Thanks for any help

Edit: HTML of the tabs:

<div class="feature-tabs" id="tabs-set">
    <ul>
        <li><a href="#tabs-1" id="tab1">How does it<br/>work?</a></li>
        <li><a href="#tabs-2" id="tab2">Heating Start<br/>Time</a></li>
        <li><a href="#tabs-3" id="tab3">Turning on<br/>the boiler</a></li>
    </ul>
    <div id="tabs-1">
        <p>test</p>
        </div>
    <div id="tabs-2">
        <p>test2</p>        
                </div>
    <div id="tabs-3">
        <p>test3</p>
        </div>
</div>

Upvotes: 1

Views: 7033

Answers (3)

escouser
escouser

Reputation: 1943

You need to set the disabled value to be an array with the index of each tab to disable - the tabs are zero-index.

For more details read about disabled in the options tab at http://jqueryui.com/demos/tabs.

Upvotes: 0

FosterZ
FosterZ

Reputation: 3911

See did you try disabling each tab like this given on JQuery UI Site

$( ".selector" ).tabs({ disabled: [1, 2] });

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

You should use

disabled: [1, 2]

where the number of the arrays are the tabs to be disabled (starting from 0) so that disable the second and third tab

edit in your case use 

$(".feature-tabs").tabs({
    disabled: [0, 1, 2],
    collapsible: true,
    fx: [{
        opacity: 'toggle',
        duration: 'slow',
        height: 'toggle'}, // hide option  
         {opacity: 'toggle',
        duration: 'slow',
        height: 'toggle'}]
}); // show option

fiddle here http://jsfiddle.net/WqPtr/

Upvotes: 3

Related Questions