Jquery UI Tabs: Link to next/specific tab from within tab

Question

I have the following jquery code implemented:

$( "#admitpage" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#admitpage li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

The HTML is similar to this:

<div id="admitpage">
    <div class="navigation">
        <ul>
            <li><a href="#tab-1">Tab 1</a></li>
            <li><a href="#tab-2">Tab 2</a></li>
        </ul>
    </div>
    <div class="tab" id="tab-1">
        <p>Tab 1 content</p>
        <a class="next" href="#tab-2">Next</a>
    </div>
    <div class="tab" id="tab-2">
        <p>Tab 2 content</p>
    </div>
</div>

Now the problem is, a.next doesn't work. I guess because it is within a tab already. How do I make it work? Any help would be greatly appreciated. I've been trying to resolve this for the past hour.

Answer 1

The simplest solution would be to attach a click event to that link. Something like

  $(".next").click(
    function() {
      var currentIdx = $('#admitpage').tabs('option', 'active');
      $("#admitpage").tabs({
        active: currentIdx + 1
      });
      return false;
    }
  );

Answer 2

You need to manually handle it.

First we should set the active tab to the new tab using the active option, and then call refresh

 $("#admitpage").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); $("#admitpage li").removeClass("ui-corner-top").addClass("ui-corner-left"); $(".next").click(function(e) { e.preventDefault(); var index = parseInt(this.href.split("#tab-")[1]) - 1; $("#admitpage").tabs("option", "active", index).tabs("refresh"); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <div id="admitpage"> <div class="navigation"> <ul> <li><a href="#tab-1">Tab 1</a> </li> <li><a href="#tab-2">Tab 2</a> </li> </ul> </div> <div class="tab" id="tab-1"> <p>Tab 1 content</p> <a class="next" href="#tab-2">Next</a> </div> <div class="tab" id="tab-2"> <p>Tab 2 content</p> </div> </div>