CODEWITHSUNDEEP
javascriptjqueryhtmlcsstabs
DavidMcHale92
DavidMcHale92

Reputation: 61

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

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?

Upvotes: 0

Views: 196

Answers (2)

A. Wolff
A. Wolff

Reputation: 74410

You need to refresh it: DOC

DEMO

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

Upvotes: 1

Farrukh Subhani
Farrukh Subhani

Reputation: 2038

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/

Upvotes: 0

Related Questions