Deactivate visibility of a html-element after activating the basemapgallery via Expand-button

[KaiBehncke]

Daar users,

in my application I have a map-div and a "layer-selection-span":

   <div id="viewDiv">
        </div>
        <span id="layerToggle">
          <input type="checkbox" id="kanalLyr" checked> Kanal
        </span>

Furthermore I use an Expand to show the BaseMapGallery:

var basemapGallery = new BasemapGallery({
            view: view,
            source: initBasemap,
            container: document.createElement("div")
          });

          var bgExpand = new Expand({
            view: view,
            expandTooltip: "Basiskarten",
            content: basemapGallery
          });

          view.ui.add(bgExpand,{
              position: 'bottom-left',
          });

I try to find a solution that the

 span id="layerToggle" is not visible anymore, if I open the BasemapGallery (and that it is visible, if I close the BaseMapGallery).

I tried things like:

bgExpand.addEventListener("click",event=>{

  ....

});

or:

bgExpand.on("click", function(event){

....

});

...but without success. Can anybody help please? How can I start a function after clicking on the Expand-Button?

[AnneFitz · Accepted solution]

Hi - you can watch the expanded property on the Expand widget to know whether it is expanded/collapsed and then update the visibility of your layerToggle. Here's an example: https://codepen.io/annefitz/pen/gONmeMR?editors=100

bgExpand.watch("expanded", () => {
   document.getElementById("layerToggle").style.display = bgExpand.expanded ? "none" : "block";
})

[KaiBehncke · Accepted solution]

Thank you very much, Anne, good solution  !

Another solution for the described problem is:

 reactiveUtils.watch(
    () => [bgExpand.expanded], ([bgExpand]) => {
       if (bgExpand==true) (document.getElementById("layerToggle").style.visibility="hidden");
       if (bgExpand==false)(document.getElementById("layerToggle").style.visibility="visible");
    });