title: Hide and show Jquery UI tabs
body: <p>I am using jquery UI tabs and working pretty well and now I want to hide and show tabs with a click of button as shown below.</p>
  
  <p>On each tab I have a button and when I click it it should hide the present tab and the rest tabs and should show me the next tab.(ie..If I am on tab-1 and If I click button it should show me the tab-2 and should hide 1,3 and 4 tabs) and similarly for 2,3,4 tabs.</p>
  
  <p>This is what I mean ?</p>
  
  <p><img src="https://i.stack.imgur.com/JgUtB.png" alt="enter image description here"></p>
  
  <p>So how do I do that?</p>
  
  <p>Here is my code:
  script:</p>
  
  <pre><code>&lt;script&gt;
      $(function() {
          $( "#tabs" ).tabs();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      #tabs { width: 700px; }
    &lt;/style&gt;
  </code></pre>
  
  <p>Tabs:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#tabs-1"&gt;TAB1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs-2"&gt;TAB2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs-3"&gt;TAB3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs-4"&gt;TAB4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="tabs-1"&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="tabs-2"&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="tabs-3"&gt;
      &lt;p&gt;&lt;/p&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>