Using legend with dijit/form/DropDownButton in ArcGIS API for JavaScript?

Question

I am very new to the ArcGIS API for Javascript and am by no means a programmer. Nonetheless, I have been fairly successful at finding existing code and modifying it to my needs. That is, until now.

I want something that I think should be simple and straightforward. However, despite looking high and low, I cannot find a good code sample. I would like a button that, when clicked, shows or hides a legend (or TOC). Indeed, I have seen multiple examples of this in WebAppBuilder applications and elsewhere, but it has not been easy to tease through the code. Surely, some others have done this.

It seems to me that my answer should be in "dijit/form/DropDownButton." However, this newbie cannot seem to get it to work. My guess is I am overlooking the obvious (or, perhaps, I am approaching it all wrong).

I have attached a snippet of the code sample below.

 require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "esri/InfoTemplate",
    "esri/renderers/UniqueValueRenderer",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/Color",
    "esri/dijit/Legend",
    "dijit/form/DropDownButton", 
    "dojo/_base/array", 
    "dojo/domReady!"
  ], function(Map, FeatureLayer, InfoTemplate, UniqueValueRenderer, SimpleMarkerSymbol, Color, Legend, DropDownButton, arrayUtils) {
    map = new Map("map", {
    basemap:"gray",
    center: [-98.435731, 35.222876],
    zoom: 7,
    logo: false,
    slider: false
  });

    var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");

    var renderer = new UniqueValueRenderer(null, "Type");

    var symbol1 = new SimpleMarkerSymbol();
    symbol1.setColor(new Color("#ed5151"));
    renderer.addValue("National Park", symbol1);

    var symbol2 = new SimpleMarkerSymbol();
    symbol2.setColor(new Color("#149ece"));
    renderer.addValue("National Monument", symbol2);
    layer.setRenderer(renderer);

    map.addLayers([layer]);

        //add the legend
      map.on("layers-add-result", function (evt) {
        var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
          return {layer:layer.layer, title:layer.layer.name};
        });
        if (layerInfo.length > 0) {
          var legend = new Legend({
            map: map,
            layerInfos: layerInfo
          }, "legend");
          legend.startup();
        }

      });


  });

My HTML body then has these divs:

<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
  <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">It certainly would be nice if this worked!    
    <div id="subheader">No really</div>
    <!-- Legend widget inside a Drop Down Button -->
    <div id="legend-wrapper">
      <div data-dojo-type="dijit.form.DropDownButton">
        <span>Legend</span>
        <div data-dojo-type="dijit.TooltipDialog">
          <div id="legend" dojoType="dijit.layout.ContentPane" style="overflow:auto;width:225px;height:100px;vertical-align:top;"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
</div>

Answer 1

you don't necessarily need a dropdown. any button will do. you just need to work on ensuring that clicking the button alters the .css appropriately.

this is a mostly completely unrelated code sample, but check out the live demo below to see an example where clicking a feature in the map makes an unrelated <div> visible by removing a CSS class.

code: https://github.com/jgravois/esri-leaflet-related/blob/master/index.html#L92
live: http://johngravois.com/esri-leaflet-related/index.html

Answer 2

@John Gravois provided a solution.

I used dojo/fx/toggler to solve my problem. I also found the dropdown menu solution.

Both work equally well, so it is merely a matter of preference:

var myButton = new DropDownButton({  
        label: "Legend",  
        dropDown: legend  
    });  
      dom.byId("dropDownButtonContainer").appendChild(myButton.domNode);  
    }); 

With the following in the HTML body:

<body class="claro">  
  <div id="legend" style="display: none;"></div>  
  <div id="dropDownButtonContainer"></div>  
  <div id="map"></div>  
</body>