How to Expand the LayerList in API 4.3

3107
3
03-23-2017 09:34 AM
LoriEmerson_McCormack
Occasional Contributor

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" 

<div class="esri-layer-list__item-container">

   <span tabindex="0" title="Expand" class="esri-layer-list__child-toggle" role="button" aria-expanded="false" aria-controls="layerListDiv_15afbb8a47b-object-23">...</span>

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

<ul class="esri-layer-list__list esri-layer-list__--independent" id="layerListDiv_15afbb8a47b-object-23" role="group" hidden=" ">...</ul>

3.  the icon changes from

<span class="esri-layer-list__child-toggle-icon--closed esri-icon-rigjht-triangle-arrow" aria-hidden="true"></span>

to

<span class="esri-layer-list__child-toggle-icon--opened esri-icon-down-arrow" aria-hidden="true"></span>

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

0 Kudos
3 Replies
JimNoel
New Contributor III

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.

LoriEmerson_McCormack
Occasional Contributor

Thanks, Jim.  Your solution is elegant.

0 Kudos
HollieK
New Contributor

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!

0 Kudos