Check documentation for the latest version 6.0 of dhtmlxSuite Configuring Tabs DHTMLX Docs

Configuring Tabs

Closing Button for Each Tab

1) You can enable close button for all tabs from init:

// on init stage
var myTabbar = new dhtmlXTabBar({
    parent:         "tabbarObj",
    close_button:   true

2) You can enable close button with the help of the enableTabCloseButton() method

// in code but before tabs adding

3) If you enabled closing button but want to hide it on certain tab, you need to specify close:false for this tab:

// on init stage
var myTabbar = new dhtmlXTabBar({
    parent:         "tabbarObj",
    close_button:   true,
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"},
        {id: "a3", text: "Tab 3", close: false} // tab w/o close button
// from js
// params: id, text, width, position, active, close);
    "a4",       // id
    "Tab 4",    // tab text
    null,       // auto width
    null,       // last position
    false,      // inactive
    false       // disable close button <-- this one

Related sample:  Closing button

Setting/Getting Tab's Text

To set the text of a tab use the setText() method:


To get the text of a tab use the getText() method:

var text = myTabbar.tabs(id).getText();

Showing/Hiding Existing Tab

To show a tab use the show() method:


To hide a tab use the hide() method:


Adding/Removing Tab

To add a tab use the addTab() method:

myTabbar.addTab("tabId", "Tab Text");

To remove a tab from tabbar use the close() method:


Enabling/Disabling Tab

To enable a tab use the enable() method:


To disable a tab use the disable() method:


Setting/Getting the Active Tab

To select a tab use the setActive() method:


To get the active tab use the method getActiveTab():

// get active tab
var actvId = myTabbar.getActiveTab();

There's no possibility to drag-n-drop the tabs of Tabbar.

Back to top