Skip to content

component

Aisol Accordion

By ulz song

Details

Summary

Aisol Accordion is a disclosure component whose panels can hold real sections, not just a paragraph.

Description

Aisol Accordion is a disclosure component whose panels can hold real sections, not just a paragraph. Slot panels: connect any frame or CMS-bound section to a panel with the Panels control. Text-only panels use the built-in Bodies control (line breaks become paragraphs). Deep links: ?open=slug opens the matching panel on load and scrolls to it once. Every click updates the URL with replaceState, so history stays clean and links are shareable. Open modes: single, multiple, or all-open-on-desktop (collapses to single below your mobile breakpoint). Accessibility: header buttons with aria-expanded and aria-controls, region panels with aria-labelledby, Arrow / Home / End keyboard navigation, reduced-motion aware height transition with no layout measuring. Controls: Labels, Panels (component slots), Bodies (fallback text), Open mode, Mobile under, Icon style (chevron / plus), colors, typography, radius, spacing, canvas open state. Touches only its own DOM: no document queries, no ids written to your page. Live example: https://thistle-timing-694660.framer.app/aisol-accordion (first panel shows a slot with three feature cards, the rest use text fallback). More components at Aisol Studio: aisol.studio Part of the Aisol Course Site Kit - Get this plus the tuition plan table, event list, hotspots and the free FAQ Fold for $19 instead of $31: https://payhip.com/b/W2hRH

Introduction

Panels that hold real sections

Rank history

Daily rank per list, from the first snapshot — lower is better.

11001200121158/309/39/79/119/15
  • All · #1235