I am using jQuery Tabs. And what I want to happen is, when I click "Tab 1" set css on a div with the ID "controls1" to display block, else display none.

Here is what I have sorta...

jQuery(document).ready(function(){

$("#tabs").tabs();

if ( TAB ONE IS SELECTED )

{
    $("#controls1").css("display", "block");
}
else
{
    $("#controls1").css("display", "none");
}

I don't know how to say that if a Tab is selected do this....

1 answer

Ktash 1851
1
point

Assuming you are using the jQuery UI tabs, you can either find it based on the class .ui-tab-selected or you can trigger this on a create or select event as detailed in the jQuery UI documentation.

Basically, it would look like either

if($('#tabs li:first').is('.ui-tab-selected')) {
    $('#controls1').show();
} else {
    $('#controls1').hide();
}

or

$('#tabs').tabs({
    select: function (event,ui) { ... },
    create: function (event,ui) { ... }
});

and from there check the index of the matched element. If you want it to do this everytime, then you'll want to do a combination of the two, and put the if inside the function. But if you only want to do it on load, then you'll just need the if.

Answered almost 6 years ago by Ktash