lorieme

How to Expand the LayerList in API 4.3

Discussion created by lorieme on Mar 23, 2017
Latest reply on Sep 13, 2017 by falconclock

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

Outcomes