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?
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>