Fold Stack

An accordion that holds real sections, not just a paragraph. It measures the true height rather than guessing a max height, then releases to auto, and it is reachable by keyboard and by URL.

Each panel holds a real Framer section, not a string: a hero, a pricing table, a form, a gallery, anything you would otherwise build straight on the canvas.

Panels: unlimited. Panel height: measured from the real content, never a guessed max height.
  1. Drop your sections into the Panels slot, one frame per panel.
  2. Write one heading per line in the Headings field, top to bottom.
  3. Pick single or multi open, then style the colours and the icon.

Most accordions on the shelf hold one FAQ paragraph per panel, clipped to a guessed max height. This one measures the real height of whatever sits inside it, so a panel can hold a full section and still open to exactly its own size, then release to a natural height once it settles so later content is never clipped.

Arrow keys move between headings, Home and End jump to the first and last, Enter and Space open whichever header is focused. A link ending in a panel id opens that panel on load.

UpDownHomeEndEnterSpace

One panel open on arrival. Press a heading, or use the arrow keys: the open panel animates from its measured height and then releases to auto, so content that grows later is not clipped.

Each panel holds a real Framer section, not a string: a hero, a pricing table, a form, a gallery, anything you would otherwise build straight on the canvas.

Panels: unlimited. Panel height: measured from the real content, never a guessed max height.
  1. Drop your sections into the Panels slot, one frame per panel.
  2. Write one heading per line in the Headings field, top to bottom.
  3. Pick single or multi open, then style the colours and the icon.

Most accordions on the shelf hold one FAQ paragraph per panel, clipped to a guessed max height. This one measures the real height of whatever sits inside it, so a panel can hold a full section and still open to exactly its own size, then release to a natural height once it settles so later content is never clipped.

Arrow keys move between headings, Home and End jump to the first and last, Enter and Space open whichever header is focused. A link ending in a panel id opens that panel on load.

UpDownHomeEndEnterSpace

The same stack in multi mode, with plus and minus icons, no dividers and a different accent. Every one of those is a property control.

Create a free website with Framer, the website builder loved by startups, designers and agencies.