Add collapsible filter panel using HTML details/summary

[Copilot]

Adds a filter icon to the filter header that toggles panel visibility between collapsed (icon + event count only) and expanded (full filter controls) states using native HTML <details> and <summary> elements.

Changes

HTML (index.html)

• Added filter icon SVG to <summary> element inside <details>
• Replaced wrapper <div id="filter-content"> with <details> element
• Added open attribute to display filters expanded by default

JavaScript (map.js)

• No JavaScript required - removed custom toggle function

CSS (style.css)

• Styled filter icon (20×20px, gray fill)
• Made summary clickable with pointer cursor and hover state
• Added styling for details:not([open]) summary to adjust spacing when collapsed
• Hidden default disclosure triangle with list-style: none

Benefits

• No JavaScript required - purely semantic HTML
• Better accessibility
• Native browser support
• Simpler, more maintainable code

Screenshots

Expanded state:

Collapsed state:

Original prompt

add a filters icon to the filters header and when you tap on the header it should hide everything except a filter icon and when you tap it again it expands to the original filter panel. it does not have to be the same exact icon / instance

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[ProLoser]

@copilot use summary and details instead of JavaScript

[Copilot]

@copilot use summary and details instead of JavaScript

Replaced JavaScript toggle with native HTML <details> and <summary> elements in commit 44ee4db.

Changes:

• Removed toggleFilters() function from map.js
• Replaced <h2> + <div> with <details> + <summary> in index.html
• Updated CSS to style summary element

Screenshots:

Expanded:

Collapsed: