Question

I have some jquery tabs on my page the code for them is:

//tabs options
$("#tabs").tabs({ collapsible: true,  selected: -1 });  

I want to create a button that will toggle the above option ‘selected: -1’

I need it to change the value of ‘selected’ to ‘0’ then back to ‘-1’

How would I do this?

<a href="#">Toggle View</a>

Answer 1

You can do it like this:

<a href="#" id="toggle">Toggle View</a>

Then use the .toggle() function, like this:

$("#toggle").toggle(function() {
  $("#tabs").tabs("option", "selected", -1);
}, function() {
  $("#tabs").tabs("option", "selected", 0);  
});

When you use .toggle(), it’ll cycle through the functions you pass in on each click, so on the first click the first function runs, next click the next, etc…if you pass only 2 functions, you’re toggling between them on each click.