Collapsible Mobile Footer Menu in Dawn Theme

Topic summary

Goal: Make Dawn theme footer link groups collapsible on mobile (accordion-style).

Proposed approaches:

  • Reference solution via external CodePen (accordion) was suggested, with note that implementation depends on theme/version and correctly targeting footer titles.
  • Concrete solution provided later: paste a CSS + JavaScript snippet at the end of footer.liquid.
    • CSS (max-width: 749px) styles .footer-block__heading as a toggle with +/− indicator and hides/shows the adjacent .footer-block__details-content when .block-collapsed is applied.
    • JS (on DOMContentLoaded, for mobile only) assigns ARIA attributes, adds .block-collapsed to headings by default, and toggles on click/keypress.

Results and feedback:

  • Multiple confirmations that the pasted code works as desired on Dawn (unspecified versions).
  • One report on Dawn v11: plus/minus icon appears on resize, but the content does not collapse. No fix or modification was posted.

Artifacts:

  • An image illustrates the desired mobile UI; the provided CSS/JS is central to implementation.

Status:

  • Partially resolved. Working solution for some versions; Dawn v11 compatibility issue remains open with no posted resolution yet.
Summarized with AI on January 12. AI used: gpt-5.

@myKidsLounge

can you please share footer code