Run any Skill in Manus with one click

Get Started

accordion-patterns

Stars6

Forks1

UpdatedApril 11, 2026 at 05:29

Accordion and collapsible content patterns, FAQ layouts, and progressive disclosure.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Dragoon0x

Dragoon0x/everything-design-taste

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Graphic DesignersArts, Design, Entertainment, Sports, and Media Occupations·SOC 27-1024

SKILL.md

readonly

name	accordion-patterns
description	Accordion and collapsible content patterns, FAQ layouts, and progressive disclosure.
triggers	["accordion","collapsible","expandable","FAQ"]

Accordion Patterns

Accordion Rules

Only one open at a time for simple content (FAQ). Allow multiple open for settings/forms.
Header is the full click target. Not just the chevron.
Chevron rotates on open (down → up or right → down).
Smooth animation on expand/collapse (200-300ms).
Default state: first item open, or all closed.

When to Use

FAQ pages (classic accordion use case).
Settings with grouped options.
Mobile navigation with sub-items.
Long forms with optional sections.

When NOT to Use

Content that most users need to see (don't hide important information).
Fewer than 3 items (just show them all).
Sequential content (use tabs or stepper instead).

More from this repository

same repository

ab-testing-design

Dragoon0x/everything-design-taste

A/B test design, experiment setup, variant design, and statistical analysis for designers.

2026-04-116

accessibility-deep-patterns

Dragoon0x/everything-design-taste

Advanced accessibility patterns including ARIA, screen reader optimization, cognitive accessibility, and motor impairment design.

2026-04-116

accessibility-deep

Dragoon0x/everything-design-taste

WCAG compliance deep dive, screen reader patterns, keyboard navigation, and inclusive design.

2026-04-116

ai-product-design

Dragoon0x/everything-design-taste

Designing AI-powered features, managing user expectations, and AI transparency.

2026-04-116

analytics-for-designers

Dragoon0x/everything-design-taste

Using analytics tools for design decisions, behavioral analysis, and data-informed design.

2026-04-116

analytics-reporting-design

Dragoon0x/everything-design-taste

Analytics and reporting interface design including data visualization, report builder, and metric dashboards.

2026-04-116

name	accordion-patterns
description	Accordion and collapsible content patterns, FAQ layouts, and progressive disclosure.
triggers	["accordion","collapsible","expandable","FAQ"]

Accordion Patterns

Accordion Rules

Only one open at a time for simple content (FAQ). Allow multiple open for settings/forms.
Header is the full click target. Not just the chevron.
Chevron rotates on open (down → up or right → down).
Smooth animation on expand/collapse (200-300ms).
Default state: first item open, or all closed.

When to Use

FAQ pages (classic accordion use case).
Settings with grouped options.
Mobile navigation with sub-items.
Long forms with optional sections.

When NOT to Use

Content that most users need to see (don't hide important information).
Fewer than 3 items (just show them all).
Sequential content (use tabs or stepper instead).