nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Test if Container is open

jaykapalczynski

I want to be able to test if a specific container is open or closed...then open or close it based on the outcome...know a simply If Then statement will work but confused on the syntax to determine if its open or closed, show or hidden?

On load this specific one is shown....say I want a button that when clicked determines if it is open and if so closes it...

 app.map.on("load", configNavigation);      function configNavigation(evt) {  dojo.byId("divSplashScreenContainer").style.display = "block";     }

Vind meer berichten getagd met

Accepted answers

JonathanUihlein

ESRI developed a module to make showing/hiding DOM components easier than doing it the traditional way.

You'll want to use "esri/domUtils" (https://developers.arcgis.com/javascript/jsapi/esri.domutils-amd.html).

I use toggle(), but you could always use show() or hide().

  var myButton = new Button({         label: "Click me!",         onClick: function(){             // Do something:             domUtils.toggle(dom.byId("divToShowOrHide"));         }       }, "buttonNode");

All comments

JeffPace1

they have a property "_showing"

var summPane = registry.byId('rightPane');
 if (summPane._showing) {
     setTimeout(function(){summPane.toggle();},500);
}

jaykapalczynski

exactly what I was looking for....thanks....reading up on it....

jskinner

Hi Jay,

You could use the following to check if a container is open:

registry.byId("button").on("click", function(){
  var display = dom.byId("accordion").style.display;
  if(display == 'block'){
    dom.byId("accordion").style.display = 'none';
  }
  else{
    dom.byId("accordion").style.display = 'block';
  }
})

Ex:

<!DOCTYPE html>
<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Identify with Popup</title>
  
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
    
    #rightPane {
      width: 20%;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
    </style>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",

        "dojo/_base/array",
        "esri/Color",
        "dojo/dom-construct",
        "dojo/parser",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "dojo/dom",
        "dijit/form/CheckBox",
        "dijit/registry",
        "dijit/layout/AccordionContainer",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function (
        Map, ArcGISDynamicMapServiceLayer,
        arrayUtils, Color, domConstruct, parser, utils, Legend, dom, CheckBox, 
        registry
      ) {

        parser.parse();
        
        var legendLayers = [];
        
        registry.byId("button").on("click", function(){
          var display = dom.byId("accordion").style.display;
          if(display == 'block'){
            dom.byId("accordion").style.display = 'none';
          }
          else{
            dom.byId("accordion").style.display = 'block';
          }
        })

        map = new Map("map", {
          basemap: "satellite",
          center: [-83.275, 42.573],
          zoom: 18
        });
    
        var legendLayers = [];
        
        var parcelsURL = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";
    
        var parcelLayer = new ArcGISDynamicMapServiceLayer(parcelsURL, {
          id: 'parcels'
        });

        legendLayers.push({ layer: parcelLayer, title: 'Parcels' });
          
        map.on('layers-add-result', function () {
          var legend = new Legend({
            map: map,
            layerInfos: legendLayers
          }, "legendDiv");
          legend.startup();
        });

        map.addLayers([parcelLayer ]);

        map.on('layers-add-result', function () {
          //add check boxes
          arrayUtils.forEach(legendLayers, function (layer) {
            var layerName = layer.title;
            var checkBox = new CheckBox({
              name: "checkBox" + layer.layer.id,
              value: layer.layer.id,
              checked: layer.layer.visible
            });
            checkBox.on("change", function () {
              var targetLayer = map.getLayer(this.value);
              targetLayer.setVisibility(!targetLayer.visible);
              this.checked = targetLayer.visible;
            });

            //add the check box and label to the toc
            domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");
            var checkLabel = domConstruct.create('label', {
                'for': checkBox.name,
                innerHTML: layerName
              }, checkBox.domNode, "after");
            domConstruct.place("<br />", checkLabel, "after");
          });
        });               
    
      });
    </script>
  </head>
  
<body class="claro">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer"
    data-dojo-props="design:'headline', gutters:true"
    style="width: 100%; height: 100%; margin: 0;">

      <div id="rightPane"
      data-dojo-type="dijit/layout/ContentPane"
      data-dojo-props="region:'right'">

        <div data-dojo-type="dijit/layout/AccordionContainer" id="accordion" style="display: block">
          <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
          data-dojo-props="title:'Legend', selected:true">

            <div id="legendDiv"></div>

          </div>

          <div data-dojo-type="dijit/layout/ContentPane"
          data-dojo-props="title:'Table of Contents'">

            <span style="padding:10px 0;">Click to toggle the visibility </span>

            <div id="toggle" style="padding: 2px 2px;"></div>

          </div>
        </div>
      </div>
      <div id="map"
        data-dojo-type="dijit/layout/ContentPane"
        data-dojo-props="region:'center'"
        style="overflow:hidden;">
        <div id="buttonDiv" style="z-index: 99; position: absolute; left: 100px; top: 20px;">
          <button data-dojo-type="dijit/form/Button" type="button" id="button">Show/Hide</button>
          <!--<input type="button" name="showHide" value="Show/Hide" id="showHide"/>-->
        </div>
      </div>
    </div>

  </body>

</html>

JonathanUihlein

  var myButton = new Button({         label: "Click me!",         onClick: function(){             // Do something:             domUtils.toggle(dom.byId("divToShowOrHide"));         }       }, "buttonNode");

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.