Showing & Hiding - Right Hand AccordionContainer

[GaneshSolai_Sambandam]

Hi Guys
Can anyone hlep me on this.
I have Webmap application with design layouts split into 5 sections, top, bottom, centre, left and right.
The left and right sections - AccordionContinaer with diji.layout.contentpane.
Center section - where map sits on the application.

What I wanted to do now is when the application loads, my right section AccordionContainer shouldn't be visible, it should only show an icon, where an user can click that icon and makes the right Accordioncontainer and associated contentpanes visible.

I think, some of you have done this before.

Can anyone point me to right examples or codes or links please.

regards
Ganesh

[JakeSkinner]

Hi Ganesh,

You can set the visibility of the AccordianContainer to 'hidden'.  Ex:

<div dojoType="dijit.layout.AccordionContainer" id="accordion" style="visibility:hidden;">

You can then show the AccordianContainer when the user clicks on the icon/button.  Ex:

require(["dojo/dom-style"], function(domStyle){
    domStyle.set("accordion", "visibility", "visible");
)};

[GaneshSolai_Sambandam]

Hi Jskinner
Thank you reply. But, I want to do some thing like this, as this shown on this sample link.

http://lee2.connectgis.com/Map.aspx

My right hand content pane should slide out and slide in when a user a click on the button as shown in this example.

Regards
Ganesh

[JeffPace]

I do this when i get popup results

connect.connect(popup, "onSetFeatures", lang.hitch(this, function() {
                                    var summPane = registry.byId('rightPane');
                                    if (!summPane._showing) {
                                        summPane.toggle();
                                    }

[JeffPace]

Once you have the pane showing, you can also select a specific AccordianContainer or AccordianPane

registry.byId(settings.tabContainer).selectChild(settings.accordionContainer);
registry.byId(settings.accordionContainer).selectChild(settings.accordionPane);

[GaneshSolai_Sambandam]

I do this when i get popup results

connect.connect(popup, "onSetFeatures", lang.hitch(this, function() {
                                    var summPane = registry.byId('rightPane');
                                    if (!summPane._showing) {
                                        summPane.toggle();
                                    }

hi Jeff
Not exactly sure, where to add this.
Can you show this in fiddler?

Thanks in advance.

[JeffPace]

sorry, i thought you were looking for an event

if all you want to do is start with it closed, when you define the container

data-dojo-props="region:'right',title:'Results',startExpanded:false"

[JeffJacobson · Accepted solution]

You might want to try the dojox/layout/ExpandoPane.

[JeffPace]

Thats what I get for making assumptions.

Yes this all needs to be an expandopane, its exactly what you are looking for

  <div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="region:'left',title:'Widgets',startExpanded:false" id="leftPane">
                <div data-dojo-type="dijit/layout/TabContainer"  data-dojo-props="tabPosition:'top', tabStrip:'true'" id="leftTC" style="padding:0;width:290px;" >
                    <div data-dojo-type="dijit/layout/AccordionContainer" title="Data" id="dataTab">
                        <div data-dojo-type="dijit/layout/AccordionPane" data-dojo-props="title:'Live Layers',selected:'true'" id="liveLayerPane" style="padding:0;" >
                            <div id="tocDiv" style="padding: 0 5px 0;" ></div>
                        </div>

[GaneshSolai_Sambandam]

Thats what I get for making assumptions.

Yes this all needs to be an expandopane, its exactly what you are looking for

  <div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="region:'left',title:'Widgets',startExpanded:false" id="leftPane">
                <div data-dojo-type="dijit/layout/TabContainer"  data-dojo-props="tabPosition:'top', tabStrip:'true'" id="leftTC" style="padding:0;width:290px;" >
                    <div data-dojo-type="dijit/layout/AccordionContainer" title="Data" id="dataTab">
                        <div data-dojo-type="dijit/layout/AccordionPane" data-dojo-props="title:'Live Layers',selected:'true'" id="liveLayerPane" style="padding:0;" >
                            <div id="tocDiv" style="padding: 0 5px 0;" ></div>
                        </div>

Hi Jeff and Jacob
Thank you very much for your help. I haven't tried your expandopane code, will try and get back to you tomorrow.
In the meantime, I just wanted to ask, in the link

http://lee2.connectgis.com/Map.aspx

the Lee Council has created a toggle button with click event and which slides in & out the accordion container. Have you checked the sample web application link. Are they using expandopane method. I don't think so.

I just want to do try like Lee city council method. But, if your expandopane codes work, I will use yours.

thanks very much in advance.

Ganesh