How can I add tabs in jQuery UI using an onclick handler?

Question

I'm trying to append tab information to an existing jQuery UI Tab container and then re-initialize the tab container to update the contents.

Here's a simple JSFiddle of what I'm trying to do: http://jsfiddle.net/dmchale92/Wa69N/

Here's the function I'm using to append a basic test paragraph:

$(function () {
a = "<div id='tabs-4'><p>This is a test paragraph.</p></div>"
b = "<li><a href='#tabs-4'>Blog Four</a></li>"
$("#tabs").append(a);
$("#tablist").append(b);
$("#tabs").tabs();
});

Can anybody explain to me why the new tab title doesn't keep the style of the other tabs, and why the contents are added to the bottom outside of the container instead of paginated?

Answer 1

You need to refresh it: DOC

DEMO

$("#tabs").tabs( "refresh" );

Answer 2

You need to do this

$(function () {
$('#tabs').tabs("destroy");
a = "<div id='tabs-4'><p>This is a test paragraph.</p></div>"
b = "<li><a href='#tabs-4'>Blog Four</a></li>"
$("#tabs").append(a);
$("#tablist").append(b);
$("#tabs").tabs();
});

http://jsfiddle.net/farrukhsubhani/Wa69N/2/