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
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.
Thanks, Jim. Your solution is elegant.
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!