Question

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.

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.

This is what I mean ?

So how do I do that?

Here is my code:
script:

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

Css:

<style type="text/css">
    #tabs { width: 700px; }
  </style>

Tabs:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">TAB1</a></li>
    <li><a href="#tabs-2">TAB2</a></li>
    <li><a href="#tabs-3">TAB3</a></li>
    <li><a href="#tabs-4">TAB4</a></li>
  </ul>
  <div id="tabs-1">
    <p></p>
  </div>
  <div id="tabs-2">
    <p></p>
  </div>
  <div id="tabs-3">
    <p></p>
    <p></p>
  </div>
</div>

Answer 1

I found the solution to my problem here http://beta.kilbot.com.au/labs/jquery/add-remove-tabs-using-jquery/