Widget Open and Close

[kawishabbas]

Hi

I am using arcgis api 4.10 and have a problem that i want to close first widget whenever click on second widget. i have attached file and code which is not running is mention below.

var DistanceExpand = watchUtils.pausable(distancemeasurement, "expanded", function(newValue, oldValue){
if(newValue === true){
DistanceExpand.pause();
setTimeout(function(){
printExpand.resume();
layerlistExpand.resume();
legendExpand.resume();
galleryExpand.resume();
}, 100);
}else{
DistanceExpand.resume();
}
if(print.expanded){
print.collapse();
}
if (layerlist.expanded) {
layerlist.collapse();
}
if (legend.expanded) {
legend.collapse();
}
if (gallery.expanded) {
gallery.collapse();
}
});

var printExpand = watchUtils.pausable(print, "expanded", function(newValue, oldValue){
if(newValue === true){
printExpand.pause();
setTimeout(function(){
DistanceExpand.resume();
layerlistExpand.resume();
legendExpand.resume();
galleryExpand.resume();
}, 100);
}else{
printExpand.resume();
}
if(distancemeasurement.expanded){
distancemeasurement.collapse();
}
if (layerlist.expanded) {
layerlist.collapse();
}
if (legend.expanded) {
legend.collapse();
}
if (gallery.expanded) {
gallery.collapse();
}
});

var layerlistExpand = watchUtils.pausable(layerlist, "expanded", function(newValue, oldValue){
if(newValue === true){
layerlistExpand.pause();
setTimeout(function(){
DistanceExpand.resume();
printExpand.resume();
legendExpand.resume();
galleryExpand.resume();
}, 100);
}else{
layerlistExpand .resume();
}
if(distancemeasurement.expanded){
distancemeasurement.collapse();
}
if (print.expanded) {
print.collapse();
}
if (legend.expanded) {
legend.collapse();
}
if (gallery.expanded) {
gallery.collapse();
}
});

var legendExpand = watchUtils.pausable(legend, "expanded", function(newValue, oldValue){
if(newValue === true){
legendExpand.pause();
setTimeout(function(){
DistanceExpand.resume();
printExpand.resume();
layerlistExpand.resume();
galleryExpand.resume();
}, 100);
}else{
legendExpand.resume();
}
if(distancemeasurement.expanded){
distancemeasurement.collapse();
}
if (print.expanded) {
print.collapse();
}
if (layerlist.expanded) {
layerlist.collapse();
}
if (gallery.expanded) {
gallery.collapse();
}
});

var galleryExpand = watchUtils.pausable(gallery, "expanded", function(newValue, oldValue){
if(newValue === true){
galleryExpand.pause();
setTimeout(function(){
DistanceExpand.resume();
printExpand.resume();
layerlistExpand.resume();
legendExpand.resume();
}, 100);
}else{
galleryExpand.resume();
}
if(distancemeasurement.expanded){
distancemeasurement.collapse();
}
if (print.expanded) {
print.collapse();
}
if (layerlist.expanded) {
layerlist.collapse();
}
if (legend.expanded) {
legend.collapse();
}
});

[KellyHutchins · Accepted solution]

You can use the group property on the Expand class to do that for you. Expand | API Reference | ArcGIS API for JavaScript 4.10 

[kawishabbas]

Thank You Kelly one more question is that is there any possibility to add custom button on layerlist widget?

when click on button map goes to layer location/Extent

[KellyHutchins]

There's a sample here in the help that shows how to add custom actions to the layer list 

LayerList widget with actions | ArcGIS API for JavaScript 4.10