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>