Jquery tabs next button

Question

How can I create a button that will scroll to the next Jquery tab. I want to have a next button within the tabs that will scroll to the next tab, sort of like a step-by-step tutorial. How can this be done:

 <script>
      $(document).ready(function() {
        $("#tabs").tabs();
      });
      </script>


    <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">
            <p>First tab is active by default:</p>

<a href="nexttab">Next Tab</a>

        </div>

        <div id="fragment-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 


        </div>

        <div id="fragment-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
        </div>
    </div>

Answer 1

You can use the selected option to move around, like this:

$(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("option", "selected", selected + 1);
});

Just change your anchor to match, like this:

<a class="nexttab" href="#">Next Tab</a>

You can view a demo here

---

Alternatively, make each "Next Tab" link point to a specific tab and use the select method, like this:

<a class="nexttab" href="#fragment-2">Next Tab</a>

Then you can use a bit shorter jQuery, and move to any tab you want:

$(".nexttab").click(function() {
    $("#tabs").tabs("select", this.hash);
});

Here's a demo of this approach