Create an expand/collapse section in Map Viewer popup

[MappyIan]

Does anyone know if  it's possible to create an expandable/collapsible section in a popup in Map Viewer?  In my popup I have a 'facilities' section which I would like to display as hidden when the popup loads, but give the option to the user to expand the section if they wish.

My popup currently looks like this:

But what I'd like is for the Facilities selection to load collapsed with an option/button the user can click to expand, something like this:

I can add style='display:none;' to the relevant <div> in my popup but I can't figure out how to make it visible again. I think I need to use some JavaScript, but that seems to get stripped from the popup (presumably a security risk?).

Any help would be greatly appreciated.

[KellyHutchins · Accepted solution]

One way to accomplish this could be to use the HTML details disclosure element. This creates a collapsible section using only HTML. If you click on  one of the ballot drop box locations in this map you'll see the collapsible area. 

<details>
    <summary>Drop Box Location:</summary>
    <p>
        {boxlocdesc}
    </p>
</details>

[MappyIan]

Hi @KellyHutchins, thanks for the tip.  I had no idea about the details/summary element in HTML.  I got it to work fine in the Web Map, although when I use the map in a Dashboard the expand/collapse arrow is not displayed, but I presume that's down to some CSS in ArcGIS Dashboards that I can't (easily) access:

  

I'm happy this is working well enough in the Dashboard even without the expand/collapse arrow.

Thanks again.

[KellyHutchins]

 You might be able to get the arrow to show by modifying the popup html a bit. Here's what worked for me in dashboard. I added style="display:revert;" to overwrite a dashboard style applied to the summary element.

<details>
    <summary style="display:revert;">Drop Box Location:</summary>
    <p>
       {fulladdr}
    </p>
</details>

[MappyIan]

Thanks @KellyHutchins, that worked a treat.  Here's how it looks in the Dashboard now:

Thanks again - Ian

[JohnNergeBrooklynPark]

I'm trying to get this working in the web map in Portal 11.3, but it's just showing as plain text. Any idea if there are any CSS properties that could be updated to make this work in that interface too?

[MappyIan]

Hey @JohnNergeBrooklynPark.  I was doing this in an ARCADE content block in the popup as I wanted to pull in various attribute value etc. etc.  I presume you're doing it in a different type of content block?  I was going to point you at the Web Map that @KellyHutchins links to but I see it's not working anymore as you could just copy the code from there.

I just created the following map that has an expanding/collapsing section in it: https://arcg.is/1HDbD91 

The code in the ARCADE content block in the popup is included below for ease.

Hope this helps.

var returnhtml = ''

returnhtml += '<details><summary>' + $feature.name + ' [click to expand]</summary>'
returnhtml += '<p>' + $feature.display_address + '</p>'
returnhtml += '</details>'

return { 
  type : 'text', 
  text : returnhtml
}