How to change tabs programmatically in jquery-ui 1.9?

Question

How do you change tabs programmatically with jquery-ui 1.9?

NOTE: Posting the answer because it took me more than 4 searches to find the right answer on stackoverflow. It appears in 1.9 the API has changed, in earlier versions, you would use $("#tabs").tabs("select", 2).

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

      // assume you want to change to the 3rd tab after 3 seconds
      setTimeout(function() {
         // ???
      }, 3000);
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>

    <div id="tabs-1"><p>Container 1</p></div>
    <div id="tabs-2"><p>Container 2</p></div>
    <div id="tabs-3"><p>Container 3</p></div>
</div>

score 50 · Accepted Answer · edited Jun 11 '14 at 08:32

The select method is deprecated since 1.9, and was removed in 1.10. Use the active option instead.

Example (jsfiddle also provided):

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

      // assume you want to change to the 3rd tab after 3 seconds
      setTimeout(function() {
          $("#tabs").tabs("option", "active", 2);
      }, 3000);
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>

    <div id="tabs-1"><p>Container 1</p></div>
    <div id="tabs-2"><p>Container 2</p></div>
    <div id="tabs-3"><p>Container 3</p></div>
</div>

this doesn't work in jquey UI 1.11, had to trigger a click event on the anchor element. — Aurovrata, Jul 04 '20 at 15:14

score 8 · Answer 2 · edited May 23 '17 at 11:46

8

Selection according id is very straight forward as Sonjz specified above ... but selection according to tabId is trickier .. I just want to share it in case anybody needs

var index = $('#tabs a[href="#tab_id"]').parent().index();
$("#tabs").tabs("option", "active", index);

edited May 23 '17 at 11:46

Community

1
1

answered Nov 18 '14 at 21:06

Muhammad Soliman

21,644
6
109
75

8

I got it working by doing `$('#tabs a[href="#tab_id"]')[0].click();` – Alexandre Pereira Nunes Aug 29 '15 at 17:43
1

This solution will work even if you insert new tabs before the target tab, whereas the accepted answer will break. – Dieter Donnert May 19 '19 at 13:05

score 6 · Answer 3 · edited Oct 21 '20 at 20:25

6

Try this

$('#tabs a[href="#tabs-2"]').tab('show')

Here #tabs-2 means the tab you want to switch.

edited Oct 21 '20 at 20:25

TylerH

20,799
66
75
101

answered Apr 28 '16 at 08:02

Amol Udage

2,917
19
27

I know I'm repeating myself but this solution will work even if you insert new tabs before the target tab, whereas the accepted answer will break. – Dieter Donnert May 19 '19 at 13:08

score 1 · Answer 4 · answered May 26 '20 at 12:10

If you add an id to the tab list elements, you can simulate a click using jQuery click() method.

For example the following will activate tab2 when clicking the button outside of the tabs:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1" id="th1">Tab 1</a></li>
    <li><a href="#tabs-2" id="th2">Tab 2</a></li>
    <li><a href="#tabs-3" id="th3">Tab 3</a></li>
  </ul>

  <div id="tabs-1"><p>Container 1</p></div>
  <div id="tabs-2"><p>Container 2</p></div>
  <div id="tabs-3"><p>Container 3</p></div>
</div>
<button id="btn">Click to activate Tab 2</button>
<script>
$("#tabs").tabs();
$('#btn').click(function() {$('#th2').click()});
</script>

How to change tabs programmatically in jquery-ui 1.9?

4 Answers4

Linked