How to- Trying to get Accordion Container to work with TOC/Legend Widget

[melissaGomez]

Hello,

I was using your previous example to build my TOC/Legend Widget and I got it up and running, but now I am having trouble getting my Accordion Container to appear. Everything is showing all at once in my legend.
How did you get your accordion container to continue working with the TOC?

Am I missing something in this portion of my code:

<!--Start All Div Tags in Left Pane for Accordion Container-->
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" id="leftPane">
<div data-dojo-type="dijit.layout.AccordionContainer">

<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend'">
Political Boundaries

<!--add legend here-->
<div data-dojo-type="dijit.layout.ContentPane" id="legendPane"
data-dojo-props="title:'Legend', selected:true">
<!--<div id="legendDiv"></div>-->
<div id="tocDiv">
</div>
</div>
<!--end adding legend here-->


<!--start adding print button here-->
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Print'">
<div id="printButton">
</div>
</div>
<!--end print button here-->

<!--start bookmark here-->
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Bookmark'">
<div id="bookmark"></div>
</div>
</div>
</div>
</div>
<!--end bookmark here-->
<!--End all Div Tags in Left Pane for Accordion Container-->

Please help, thanks..

[KenBuja]

What's the code for initializing the TOC widget?

Also, please put your code inside the CODE tags. You can do this by clicking on the # tool above.

[NianweiLiu]

There should not be anything special about Accordion container.

This shows how it works:
http://gmaps-utility-gis.googlecode.com/svn/trunk/agsjs/test/toc_accordion.html

you may consider using the latest TOC widget code from
http://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109

[melissaGomez]

Thank you for responding.

Here is my code for initializing the TOC widget:

//add the legend
      dojo.connect(map, 'onLayersAddResult', function (results) {
       
         var toc = new agsjs.dijit.TOC({
            map: map,
            layerInfos: [{
              layer: dynaLayer1,
              title: "Political Boundaries",
              noLegend:false,
              noLayers: false
            }
                        
                        ]
          }
                                        , 'tocDiv');
          toc.startup();
                console.log("Set TOC");
         
         
         }
                    );

      

      //map.addLayers([citycouncildistricts, countycommissionerprecincts, justiceofthepeaceprecincts, texashouseofrepresentativesdistricts]);
map.addLayers([dynaLayer1]);

dojo.connect(map, 'onLoad', function (theMap) {
        //resize the map when the browser resizes
        dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
      });
  
//"end legend"

I also ended up adding splitter="true" in my div tag, but that still didn't help anything.

I have been using both of those web links as my source to figuring this out, but am still having trouble.

Thanks again for your help..

[melissaGomez]

Thanks everybody for looking, but I was able to figure it out.
I just needed to delete the following from my first posting:

<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend'">
          Political Boundaries
</div>

After doing this portion and one more </div> at the very end of my coding, I was able to upload my web app. :)!!