Check documentation for the latest version 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