topic How to Expand the LayerList in API 4.3 in ArcGIS JavaScript Maps SDK Questions

How to Expand the LayerList in API 4.3

LoriEmerson_McCormack — Thu, 23 Mar 2017 16:34:13 GMT

Below is how I am able to expand the LayerList automatically in the ArcGIS API for JavaScript 4.3.

On an event click, I wanted the LayerList to automatically expand to show the sublayers within my MapImageLayer. In 3.x, two classes were replaced: one to expand the layerlist and another to change the icon. I am unsure how to change the attributes in the

When using Inspect Element, I can see that the following attributes change in the html:

1. the title changes from "Expand" to "Collapse" and aria-expanded changes from" false" to" true"

...

2. the hidden=" " is an element when the above elements are = Expand and false, respectively, and the hidden=" " is removed from when the above elements are = Collapse and true, respectively

3. the icon changes from

Here is my code snippet:

//*********************************************
// Function Expand Layer List
//*********************************************
function expandLayerList() {
// change aria-expanded
var x = document.getElementsByClassName("esri-layer-list__child-toggle")[0].getAttribute("aria-expanded");
if (x == "false") {
x = "true"
document.getElementsByClassName("esri-layer-list__child-toggle")[0].setAttribute("aria-expanded", x);
}
// change title
var y = document.getElementsByClassName("esri-layer-list__child-toggle")[0].getAttribute("title");
if (y == "Expand") {
y = "Collapse";
document.getElementsByClassName("esri-layer-list__child-toggle")[0].setAttribute("title", y);
}
// change hidden
var z = document.getElementsByClassName("esri-layer-list__list esri-layer-list__list--independent")[1].hasAttribute("hidden");
alert(z);
if (z) {
var h1 = document.getElementsByClassName("esri-layer-list__list esri-layer-list__list--independent")[1];
h1.removeAttribute("hidden");
}

} // end expandLayerList function

Re: How to Expand the LayerList in API 4.3

JimNoel — Sun, 12 Dec 2021 00:57:58 GMT

Hi Lori, thanks for passing this on, it was helpful! I've found a simpler way to do this, which involves setting one object in the "esri-layer-list__child-toggle" elements. It's called "data-item", which has a property called "open". Set this to true. The LayerList widget responds to this in the background.

Here is my sample code:

  function layerList_ExpandAll(expand) {
    var ctSpans = document.getElementsByClassName("esri-layer-list__child-toggle");
    for (var i = 0; i < ctSpans.length; i++)
          ctSpans[i]["data-item"].open = expand;
  }

Calling layerList_ExpandAll(true) expands all layers and layerList_ExpandAll(false) collapses all layers.

Re: How to Expand the LayerList in API 4.3

LoriEmerson_McCormack — Mon, 26 Jun 2017 22:17:19 GMT

Thanks, Jim. Your solution is elegant.

Re: How to Expand the LayerList in API 4.3

HollieK — Wed, 13 Sep 2017 14:49:46 GMT

Hello Jim - this is great, thank you! Would you mind providing a full example of how you implement your layerList_Expandall function in a map? I'm still quite new to JavaScript. I've been able to get this portion to work in my code, but it doesn't always consistently run (ex: it will sometimes only open the first portion of my legend, but leave the rest of the sublayers closed or not open anything all, both when calling it via window.onload). I know I'm doing something wrong, but I can't seem to place what it is.

Thank you in advance - your sample code has definitely helped me out a lot!