Hiding and Showing a Dijit ContentPane in a TabContainer

//Hiding and Showing a Dijit ContentPane in a TabContainer

Hiding and Showing a Dijit ContentPane in a TabContainer

There is no simple method of hiding and showing a Dijit ContentPane.

If you are displaying a number of ContentPanes within a TabContainer you may need to hide (and possibly redisplay) one or more of the ContentPanes. For instance if the tabs are displaying information based on a selected product/user/etc… some tabs might not be relevant depending on the selected product/user/etc… If you can change the selected product/user/etc… via JavaScript/AJAX, you need to be able to hide and redisplay ContentPanes.

You can remove a ContentPane by calling removeChild on the TabContainer, however if you want to be able to re-display the ContentPane later, you need to save the Dijit widget to a global JavaScript variable before you remove it.

For example assuming your page has this:




You can hide MyTab like this:

[javascript] saveMyTabWidget = dijit.byId(‘MyTab’);

And then, to redisplay, you’ll want to check if the saveMyTabWidget variable has been set, and if so, add it back as a child to the TabContainer, like this:

[javascript] if (typeof saveMyTabWidget != “undefined”) {
dijit.byId(‘MyTabContainer’).addChild(saveMyTabWidget, 0);
saleProductsTabWidget = undefined;
By |2009-03-18T18:52:50+00:00March 18th, 2009|General|19 Comments

About the Author:

Devon is a husband, amateur photographer, avid reader, and motorcycle enthusiast.


  1. […] Also, with Dijit tabs, there’s no easy way to hide a tab and resurrect it later. You have to save off the panel into a JavaScript variable, and reinstate it from that variable later. See how I handled hiding Dijit Tabs/ContentPanes in a TabContainer. […]

  2. Rick O'Shay June 11, 2009 at 10:49 am - Reply

    Removing a tab from location X and having it appear at location 0 is a rather poor design. Hiding a tab might be better but you cannot hide tabs, either. There was a section in a Dojo book on implementing this crashingly obvious feature (disabling) with the added comment that many have asked for it over many releases. Unfortunately the book’s solution is utterly useless except in the very special case presented.

    Dojo tends to advance with new classes and services while they leave their pathetic documentation (read: please document the data types of parameters and return types of all methods for all classes) and short-comings to twist in the wind. There’s a really good chance Dojo will wither and die because the folks responsible for it have their heads in the sand.

    • Devon June 11, 2009 at 10:54 am - Reply


      the example of adding the tab back in location 0 was just an example. My actual code puts each tab back in the correct location it came from. Overall I dislike hiding tabs as I think it provides an inconsistent user interface, and would prefer to simple disable/grey out the unusable tabs, keeping the tab bar the same. However this is a requirement from the client, so….:)

      I’m actually in the process of ripping out all the Dojo/Dojox/Dijit and replacing it with jQuery. So far it’s been a very pleasant change.

  3. Sharon August 17, 2009 at 10:08 am - Reply

    Does your “somePage.jsp” is just html content or including java code? As soon as I include java code in my jsp page, the tab displays nothing. My conclusion is that href in content works only with html content. Am I wrong?

    • Devon August 17, 2009 at 10:15 am - Reply

      By “java” to you mean a scriptlet? Or something else?

      Scriptlets shouldn’t matter at all, as Dijit is just making a http request from the browser, so as long as your somePage.jsp renders right on it’s own in your browser (i.e. point your browser to http://myhost.com/somePage.jsp and have the page display correctly, without server or browser errors or warnings) then it should work fine within Dijit.

  4. Sharon August 17, 2009 at 10:35 am - Reply

    never mind, it’s actually caused by some syntax error. However, I still have question here(which is a little off topic):
    I have tab 1, tab 2, tab 3.
    The user selects something in tab 1 and 2, then in tab 3, I’d like to see the changes. I saved the user selection successfully to mysql database. But I am having difficulty in displaying the new results in third tab. Thanks.

    • Devon August 17, 2009 at 10:39 am - Reply

      Are you reloading the tab contents after all the changes are saved?

      Set preventCache to true, and then call refresh() on the 3rd tab, should work…

  5. Vov9 March 18, 2010 at 12:00 am - Reply

    Thank you!

  6. Gowthaman June 4, 2010 at 12:23 pm - Reply

    This blog helped me a lot. Thanks.

  7. Morree February 7, 2011 at 3:24 am - Reply

    Nice article! i had the same problem..


  8. road-movie October 25, 2011 at 12:58 am - Reply

    I didn’t like the approach, but after a long search this is the only way it works. Thanks a lot!

  9. xyz November 20, 2011 at 10:18 pm - Reply

    its tested the contentPane

  10. Madhu May 28, 2012 at 10:47 pm - Reply

    Doubt – Let say I have 3 tabs where on click of tab1 loads a jsp. On submit of this jsp it hits the server and returns an other JSP which should be loaded in the same place. how to do this?

    • Devon May 29, 2012 at 4:03 am - Reply

      You have to make the form submission an AJAX submit, not a normal browser submit. Do that, and then refresh the tab content and set preventCache to true. Should work fine.

  11. thunyaluck July 17, 2012 at 1:14 am - Reply

    Thanks a lot!

  12. Nikita August 14, 2012 at 1:24 am - Reply

    I have a doubt in this line “saveMyTabWidget.setHref(theURL);”.
    which URL we need to give here ?

    • Devon August 14, 2012 at 7:27 am - Reply

      The URL of the tab content to be fetched via AJAX.

  13. OammieR December 5, 2012 at 10:36 pm - Reply

    Thank you so much my friend.

  14. Dave September 29, 2014 at 3:15 pm - Reply

    Thanks, man – works great.

Leave A Comment