Adding and removing twitter bootstrap tabs/pills

Question

I would like to use bootstrap's built in tabs in my site, but I need users to be able to add or remove tabs themselves. I've seen several demos of jqueryUI tabs that allow the user to add or remove them, and I know that bootstrap's tabs are jquery themselves, so I know it should be a pretty easy script to add that functionality but I just can't figure it out. Anyone know how to do this?

Answer 1

Tabs are activated individually, so you should be able to simply add/remove the element from the DOM and call $().tab('show').

Let's say you have existing tabs:

<div class="tab-content">
  <div class="tab-pane" id="existingTab">..</div>
</div>

Example of adding a new tab:

$('.tab-content')
    .append(
        $('<div></div>')
            .addClass('tab-pane')
            .attr('id', 'newTab')
    );

$('#newTab').tab('show');

This will make a new tab appear.