dijit tabcontainer how do I hide a tab?

Question

I can't figure out how to hide a tab in a tab container. What I've tried so far does not work.

The result of the code below is that what was in the tab is not shown but the tab itself is till there. It doesn't seem to hide the tab.

I want the entire tab to be removed as if it never existed.

<div id="center" data-dojo-type="dijit/layout/TabContainer"  controllerWidget="dijit.layout.TabController">
<div id="tab1" data-dojo-type="dijit/layout/ContentPane"  title="tab1"></div>
<div id="tab2" data-dojo-type="dijit/layout/ContentPane"  title="tab2"></div>
<div id="tab3" data-dojo-type="dijit/layout/ContentPane"  title="tab3"></div>
</div>

this just hides the tab contents

console.log(dijit.byId("tab2"));
dijit.byId("tab2").style.display= 'none';
dijit.byId("tab2").resize();

this just greys out the button

 var tabContainer = dijit.byId("center"); //Tr
    var tab = dijit.byId("tab2"); //tab Id which you want to show
    tabContainer.selectChild(tab); //Show the selected Tab  
    tabContainer.getChildren()[0].controlButton.set('disabled', true);

How do I completely hide the tab button and the contents as if they were never there?

score 1 · Accepted Answer · answered Dec 03 '19 at 20:00

You can hide tab using dojo/dom-style , by hidig both the controlButton.domNode and domNode itself . but be sur to change selected tab before hiding it as below :

var tabContainer = registry.byId("center");
var tab1 = registry.byId("tab1");
var tab2 = registry.byId("tab2");
tabContainer.selectChild(tab2); // change tab

domStyle.set(tab1.controlButton.domNode, "display", "none");
domStyle.set(tab1.domNode, "display", "none");

See below working snippet

require(["dojo/on", "dojo/dom", "dojo/ready", "dijit/registry","dojo/dom-construct", "dijit/layout/TabContainer", "dijit/layout/ContentPane",
  "dojo/dom-style"
], function(On, dom, ready, registry,domConstruct, TabContainer, ContentPane, domStyle) {
  ready(function() {
    var tabContainer = registry.byId("center");
    var tab1 = registry.byId("tab1");
    var tab2 = registry.byId("tab2");
    tabContainer.selectChild(tab2);
    
    domStyle.set(tab1.controlButton.domNode, "display", "none");
    domStyle.set(tab1.domNode, "display", "none");
  });
});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#center {
  height: 100% !important;
}

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<script>
  dojoConfig = {
    parseOnLoad: true,
    async: true
  };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>

<body class="claro">
  <div id="center" data-dojo-type="dijit/layout/TabContainer" >
<div id="tab1" data-dojo-type="dijit/layout/ContentPane"  title="tab1">tab1 </div>
<div id="tab2" data-dojo-type="dijit/layout/ContentPane"  title="tab2">tab2 </div>
<div id="tab3" data-dojo-type="dijit/layout/ContentPane"  title="tab3">tab3 </div>
</div>
</body>

Awesome Springer F. It actually worked! Thanks for the excellent example. — techdog, Dec 04 '19 at 00:22

dijit tabcontainer how do I hide a tab?

1 Answers1