My goal is to enhance an existing jQuery UI Tab container by adding tab information and then updating the contents through re-initialization.
To see a demonstration of what I am trying to achieve, take a look at this JSFiddle: http://jsfiddle.net/dmchale92/Wa69N/
Below is the function that I am using to add a simple 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();
});
I'm puzzled as to why the new tab title deviates from the style of the other tabs, and why the content gets added at the bottom outside of the container rather than being paginated properly. Can anyone shed some light on this issue for me?