how to add and remove jquery tabs dynamically?

Question

I have an aspx page on which I have 2 static jquery tabs.Upon clicking on a button avaiable on one of these tabs,I would like to add a new tab dynamically,which gets its content

Answer 1

Have you tried using the add method of the tabs?

var tabs = $("#tabs").tabs();
$('#tabs-1 button').click(function(){
    tabs.tabs('add','/url_for_tab/','New tab');
});

Update -- As of jQuery UI 1.9 the add remove methods have been deprecated and in jQuery UI 1.10 they have been removed.

The correct way to do this for remote (ajax) content tabs now is:

var tabs = $( "#tabs" ).tabs();
var ul = tabs.find( "ul" );
$( "
New Tab
" ).appendTo( ul );
tabs.tabs( "refresh" );

And for when you already have the content:

var tabs = $( "#tabs" ).tabs();
var ul = tabs.find( "ul" );
$( "
New Tab
" ).appendTo( ul );
$( "
New Content
" ).appendTo( tabs );
tabs.tabs( "refresh" );