title: JQuery UI 1.11 Set tab to active
body: <p>I have Jquery 1.11 and I have been trying for hours to get the newly created tab to be set to active and show it.</p>
  
  <p><a href="http://jsfiddle.net/BigAL83/q5oyherk/" rel="nofollow">Jsfiddle</a></p>
  
  <p>I also would like to add an "x" on the tab to close the tab.</p>
  
  <p>I have went through a lot of posts on here and they are mainly for older deprecated methods.</p>
  
  <p>Javascript:</p>
  
  <pre><code>$(function() {
    var tabs = $( "#search-tabs" ).tabs({
          heightStyle: "fill"
      });
      tabs.find( ".ui-tabs-nav" ).sortable({
          axis: "x",
          stop: function() {
              tabs.tabs("refresh");
          }
      });
  
  
      $('button#addtab').click(function(){
          var num_tabs = $("div#search-tabs ul li").length + 1;
  
          $("div#search-tabs ul").prepend(
              "&lt;li&gt;&lt;a href='#s-tab" + num_tabs + "'&gt;#" + num_tabs + "&lt;/a&gt;&lt;/li&gt;"
          );
  
          $("div#search-tabs").append(
              "&lt;div id='s-tab" + num_tabs + "'&gt;#" + num_tabs + "&lt;/div&gt;"
          );
  
          $("#search-tabs").tabs("refresh");
  });
  
  });
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>  &lt;button id="addtab"&gt;Add Tab&lt;/button&gt;
    &lt;div id="search-tabs" &gt;
      &lt;ul&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>