Jquery UI Tabs: How do i hide a tab and its corresponding div when i close it

Question

I have used Jquery UI Tabs, and given close option to the tabs. By default i am creating three tabs and its corresponding three divs. Now when i close a tab then the tab and

Answer 1

I just tested this for two tabs, you can add the needed logic to make it available for N tabs.

For this you open a first tab by default, then you open a second tab then:

$("#yourTabHref").parent().children(":first").children(":first").next().hide();

Explanation: The parent is used to go to the div of your tabs, then children(":first") moves you tho the ul, then again children(":first") moves you to the first li, but we are going to hide the second tab, that means the second li that's why whe use the next(), now we are at the second tab, then just hide it.

By last, just hide the tab content:

$("#yourTabHref").hide();

To show everything again just:

$("#yourTabHref").parent().children(":first").children(":first").next().show();
$("#yourTabHref").hide();