jQuery UI tabs: Adding new tabs and back button

jQuery UI tabs: Adding new tabs and back button

I want to add new tabs on clicking on the links inside the main tabs. Those new tabs would contain contents fetched from ajax. so it's like product categories open in new tab.

I added jQuery BBQ plugin to support navigating forward and backward history.

JSfiddle
JSfiddle output

  1. $(".borrd-right").tabs({ hide: { effect: "fade", duration: "fast" } }); <!--ADD NEW TABS--> $(".borrd-create-prod li a").click(function () { var num_tabs = $("#borrd-right .borrd-tabs li").length + 1; var tab_name = $(this).text(); var tab_name_lwr = $(this).text().toLowerCase(); $("#borrd-right .borrd-tabs").append( "<li><a href='#tab-"+tab_name_lwr+"'>"+tab_name+ "</a></li>"); $("#borrd-right").append( "<div id='tab-"+tab_name_lwr+"'>"+tab_name+"</div>"); $("#borrd-right").tabs("refresh"); }); <!--END ADD NEW TABS-->

Now the issues as you see in fiddle are:

  1. New tabs are added but the contents of those tabs just display below the main tab itself. jQuery UI tab isn't applying on the newly created tab contents.

  2. May be because of that issue, BBQ plugin also isn't working on new tabs?

What am I doing wrong? Thanks in advance for your help!