topic Re: Create an expand/collapse section in Map Viewer popup in ArcGIS Online Questions

Create an expand/collapse section in Map Viewer popup

MappyIan — Fri, 20 Jun 2025 14:21:38 GMT

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.

Re: Create an expand/collapse section in Map Viewer popup

KellyHutchins — Mon, 23 Jun 2025 17:54:32 GMT

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>

Re: Create an expand/collapse section in Map Viewer popup

MappyIan — Tue, 24 Jun 2025 10:19:49 GMT

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.

Re: Create an expand/collapse section in Map Viewer popup

KellyHutchins — Tue, 24 Jun 2025 16:34:36 GMT

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>

Re: Create an expand/collapse section in Map Viewer popup

MappyIan — Wed, 25 Jun 2025 08:28:59 GMT

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

Thanks again - Ian

Re: Create an expand/collapse section in Map Viewer popup

JohnNergeBrooklynPark — Wed, 29 Apr 2026 19:15:08 GMT

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?

Re: Create an expand/collapse section in Map Viewer popup

MappyIan — Thu, 30 Apr 2026 09:22:19 GMT

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
}