How To Hide/show Tabs Using Jquery

I have four tabs.On loading only the first tab is opened and when we click on the checkboxes corresponding tab is generated and when we unchecked, the tab will be deleted.How can I

Solution 1:

Instead of deleting the tab, consider hiding it.

You can add the following CSS to make it work.

.ui-state-disabled {
    display: none;
}

Check this fiddle: http://jsfiddle.net/2aQ2g/12/

Of course would also need to handle the hiding of corresponding tab content as well.

Solution 2:

Half answer ..for enabling the tab on the cooresponding checkbox click

  $(function() {
      $("#tabs").tabs();

    $( "input[type=checkbox]" ).click(function(){
        if ($(this).is(':checked')) {

            $('#tabs').tabs({"selected": parseInt($(this).val()-1),"enabled":parseInt($(this).val()-1) });
        }
        });
    });