Footer with Mobile Accordion Collapse — Same Markup, Grid on Desktop, Accordion on Mobile

A footer with four or five link columns is fine on desktop, but stacked vertically on a phone it can push several hundred pixels of link text between the page's actual content and anything below the footer. This snippet solves that by making each footer column an accordion on narrow screens only, collapsed by default so a mobile visitor sees just the column headings, while leaving the desktop layout as a plain, always-expanded CSS grid — using exactly the same HTML for both.

CSS media query decides which behavior is even active

The .col-toggle button is display: none by default and only becomes display: flex inside the @media (max-width: 560px) block — so above that breakpoint, the toggle buttons don't just look inactive, they're not interactive or present in the layout at all, and .col-links has no max-height restriction, showing every link permanently. Below the breakpoint, the same .col-links gets max-height: 0 with overflow: hidden, and only the .footer-col.open state raises that to 240px — the accordion mechanic is entirely dormant until the media query itself makes it relevant.

Keeping aria-expanded honest across the breakpoint

This is the detail most footer-accordion implementations get wrong: a column's .open class might be toggled while the page is narrow, but if the user then resizes the browser wider (or rotates a tablet), the links become permanently visible again via the desktop CSS grid — yet without correction, aria-expanded="false" would still be sitting on that toggle button, telling a screen reader the content is collapsed when it's now actually fully visible on screen. syncState(), driven by a matchMedia('(max-width: 560px)') listener, corrects exactly this: whenever the layout crosses the breakpoint in either direction, it forces aria-expanded="true" for every column while desktop-width (since the content is always visible there), and only defers to each column's actual .open class once back in mobile width.

Why max-height instead of display:none for the collapse

.col-links transitions max-height rather than toggling display, which is what makes the accordion open/close animate smoothly — display can't be transitioned at all, and height: auto isn't animatable either, so a generous fixed max-height (240px, comfortably larger than the tallest link list) is the standard workaround that still gives a smooth, real slide animation.

One shared JS listener per column, not one per link

Only four toggle buttons need click listeners regardless of how many links each column holds — the accordion behavior is entirely about the column-level open/closed state, so the JavaScript footprint stays constant no matter how much link content is inside.