nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Find more posts tagged with

Mapping

Arcade

Accepted answers

khutchins

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>

All comments

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
}

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

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

Thanks again - Ian

khutchins

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

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.

khutchins

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.