dijit tabcontainer how do I hide a tab?

Question

dijit tabcontainer how do I hide a tab?

596 views Asked by techdog At 03 December 2019 at 18:15

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?

Original Q&A

There are 1 answers

**Bourbia Brahim** · Accepted Answer · 2019-12-03T20:00:58+00: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>

TechQA.

dijit tabcontainer how do I hide a tab?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in DOJO

Related Questions in DIJIT.FORM

Related Questions in TABCONTAINER

Related Questions in DIJIT.LAYOUT

Popular Questions

Popular Tags

Trending Questions