# Accordions

> Collapsible disclosure panels.

- [Searchable Accordion](https://www.assembli.design/components/searchable-accordion.md): A help-center FAQ: search with a / shortcut and Esc to clear, category pills with live counts, Expand all, and questions grouped by category. Matches are highlighted in questions and answers, answers that match open themselves, and an empty state offers a way out.
- [Feature Accordion](https://www.assembli.design/components/feature-accordion.md): A landing-page feature list with a visual stage: one feature is always open, its rail fills over a few seconds before the next opens, and the stage cross-fades to that feature's visual. Autoplay pauses on hover, focus and off screen, and the visual moves inside the open item on small screens.
- [Filter Accordion](https://www.assembli.design/components/filter-accordion.md): Faceted catalogue filters as an accordion: checkbox lists with counts and Show more, color swatches, size chips with sold-out strikes and a price range with a live histogram. Closed groups show their pick count and summary, and active picks collect as removable tags with Clear all.
- [Curriculum Accordion](https://www.assembli.design/components/curriculum-accordion.md): Course content as an accordion: section, lesson and running-time totals with Expand all, sections with a progress ring and their length, and lesson rows with video, reading, quiz and exercise icons, free previews, locks and an animated now-playing lesson.
- [Checklist Accordion](https://www.assembli.design/components/checklist-accordion.md): An onboarding checklist as an accordion: a segmented bar tracks progress, each numbered step opens to a short explanation and its main action, and finishing a step draws its tick, strikes it through and opens the next one still to do.
- [Settings Accordion](https://www.assembli.design/components/settings-accordion.md): Settings sections that open in place: each row has an icon tile, a title with a one-line description and a status pill, so the closed list reads as a summary. Open sections hold the form, with an optional footer strip for Cancel and Save.
- [Boxed Accordion](https://www.assembli.design/components/boxed-accordion.md): A bordered accordion in one rounded box: rows split by hairlines, optional leading icons and quiet right-hand meta, a soft hover, a tinted open row with a turning chevron, and content indented to line up with the title.
- [Divided Accordion](https://www.assembli.design/components/divided-accordion.md): The classic FAQ accordion: hairline rules between questions, optional 01–05 numbering, a round plus that folds into a minus and fills when open, and answers that ease open with a short fade. Closed answers stay findable with the browser's find-in-page.
- [Disclosure Cards](https://www.assembli.design/components/disclosure-cards.md): Accordion as a stack of cards: the open card lifts with a shadow, its icon tile fills with an accent color and the content springs open; single or multiple expansion.
- [File Tree](https://www.assembli.design/components/file-tree.md): Explorer-style file tree with animated folders, highlighted indent guides and type-tinted icons. Implements the WAI-ARIA tree pattern: one tab stop, arrows, Right/Left to open, close or jump to parent.

Back to [all components](https://www.assembli.design/components.md).