Accordion
Components
Checklist
Reset
Header
The clickable area that triggers expanding and collapsing and has a title
The header text should clearly convey the content that is inside
Expand/collapse icon
Visual indicator of the current state — typically a plus/minus, or a caret/chevron that rotates between states
Content area
The content that shows or hides when toggled, containing detailed information associated with the header
While headers should be text only, content can be anything that is suited to help answer or elaborate on the header (text, image, video, etc)
States
Default (collapsed), expanded, hover, focused, and disabled
Expanding logic
Decide if users can open multiple sections at once, or one at a time
Can be determined by whether you think information from other items are related and should be seen together
BETA
Less debating, more deciding.
Quorum is a design voting platform that gives you immediate, quantified feedback to iterate with confidence.