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> 

Answer 1

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>