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