Get Id of TitlePane programatically defined to show/hide

Question

I am very new to Dojo and this is what I am trying to do. I have a titlepane which is programatically declared using the code below:

     var pane = this._createTitlePane(config.widgets.title,  config.widgets.position, 
                 config.widgets.open);

_createTitlePane: function (title, position, open, optclass) {
          var tp = new TitlePane({
            title: title,
            open: open
          }).placeAt(this.sidebar, position);
          domClass.add(tp.domNode, 'titlePaneBottomFix titlePaneRightFix');
          if (optclass) {
            domClass.add(tp.domNode, optclass);
          }
          tp.startup();
          return tp;
        },

Later I am trying to hide this title pane when a button is clicked using esri.hide. My question is how do I get a reference to this title pane? There's no Id when it is defined. When I look in the chrome debugger, I see the below line highlights the widget

  <div class="titlePaneBottomFix titlePaneRightFix dijitTitlePane" title="" role="group"    id="dijit_TitlePane_1" widgetid="dijit_TitlePane_1">

If I try to do something like esri.hide(dojo.byId("dijit_TitlePane_1")), then it hides the widget. But can I refer to the title pane using this widget Id?

Answer 1

You may want to just give the title pane its own id in the function:

_createTitlePane: function (title, position, open, optclass, paneId) {
      var tp = new TitlePane({
        title: title,
        id: paneId, // TitlePane id here
        open: open
      }).placeAt(this.sidebar, position);
      domClass.add(tp.domNode, 'titlePaneBottomFix titlePaneRightFix');
      if (optclass) {
        domClass.add(tp.domNode, optclass);
      }
      tp.startup();
      return tp;
}  

Then you can refer to it with and hide it with:

esri.hide(dijit.byId("theIdYouGaveIt").domNode);

To understand the difference between dojo.byId and dijit.byId, this link may help.

Answer 2

Also, if you're creating this in your own custom widget, you can also make the title pane a local reference, ie: this.tp = new TitlePane({...}). Anywhere you need to access it from inside the widget, you can simply call "this.tp". Outside of the widget, you can access it using dot notataion: myWidget.tp.doSomething(). Better yet, if you create it declaratively in a template like this: <div data-dojo-type=dijit/TitlePane" data-dojo-attach-point="tp" ...></div>, when the widget is instantiated it will automatically have a handle to "this.tp" via the attach point.