I would like to toggle between jquery ui tabs using jquery

Question

I would like to have a page where clicking on a button, automatically moves you to the next tab (like a wizard)

<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1">
    <button id="clickme">Click me</button>
  </div>
  <div id="fragment-2">
    ...
  </div>
  <div id="fragment-3">
      ...
    </div>
  </div>
</body>
<script>
$("#tabs").tabs();

$('#clickme').click(function() {
    $("#tabs").tabs({ active:"#fragment-2" });
});
</script>

What you want to do is not clear. You want fragment-1 to hide and show 2? — Rahul Khandelwal
– Rahul Khandelwal, Commented Jun 16, 2015 at 13:47
What @RahulKhandelwal said; please elaborate on exactly how you want the user experience to take place. If you mean that using jQuery UI tabs, you want a button that will be able to change the active tab as if it were clicked to move to the next tab, then that isn't hard. Get and set active tab via: api.jqueryui.com/tabs/#option-active — Shotgun Ninja
– Shotgun Ninja, Commented Jun 16, 2015 at 14:08

Ted · Accepted Answer · 2015-06-16 13:58:55Z

1

The proper way to do that after initialization is like so (and wrap the code in a document ready function):

$(document).ready(function(){
    //init the tabs
    $("#tabs").tabs();

    // add your click handler
    $('#clickme').click(function() {
        $("#tabs").tabs('option', 'active', 1 });
    });

});

The number 1 in that code is the zero-based index of the tab you want to activate, like #fragment-1 = index 0, #fragment-2 = index 1, and #fragment-3 = index 2.

Here's the jQuery Docs

answered Jun 16, 2015 at 13:58

Ted

14.9k2 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JurgenG Over a year ago

Thanks! I actually read that page in the docs, but didn't get it. Adding the indexes as example cleared it up for me :)

Collectives™ on Stack Overflow

I would like to toggle between jquery ui tabs using jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related