Bootstrap Tabs Dynamic¶ ↑

A framework for adding, remove, renaming and in general handling Twitter Bootstrap Tabs through JavaScript.

Usage and examples¶ ↑

Require the single JavaScript file.

Adding a new tab¶ ↑

tabs = $("ul.nav-tabs")
tabs.addBSTab("id_of_tab", "Tab title", "<b>Content</b>")

You can also add it by an element already defined (maybe as hidden?):

tabs.addBSTab("id_of_tab", "Tab title", $("#my_element_id"))

Removing a tab¶ ↑

tab = tabs.getBSTabByID("id_of_tab")
tab.removeBSTab()

Renaming a tab¶ ↑

tab = tabs.getBSTabByID("id_of_tab")
tab.renameBSTab("New title")

Getting the tab from a subelement within the tab.¶ ↑

a.click(function(){
  tab = $(this).currentBSTab()
})

Getting the tab ID from a subelement within the tab.¶ ↑

a.click(function(){
  tab_id = $(this).currentBSTabID()
})

Adding content ¶ ↑

tabs = $("ul.nav-tabs#TAB");         
tabs.addBSTabContent("id_of_tab", "<p>addBSTabContent</p>")

jsfiddle Example ¶ ↑

jsfiddle.net/0ua2gzyc/