Accordion
Organize and display content in a compact, collapsible format, commonly used for FAQ sections.
The key elements that define a Accordion’s structure and function.
- Header text: The main title or label for the accordion section.
- Body text: The content that expands or collapses within the accordion.
- Chevron Down (Default): The default icon, displayed at a rotation of 0 degrees, indicating that the section is closed.
- Chevron Down (Expanded): The icon rotates to 180 degrees to indicate the section is open.
State
Defines how a Accordion visually responds to user actions like hover, focus, or click, providing feedback and enhancing usability.
- Click trigger area (Header): The clickable area on the header that expands or collapses the accordion when clicked, providing access to the body content.
- Hover state: Underline the Header text.
- Closed state (Default): Hide Body text (Opacity:0%).
- Opened state: Click on trigger area (Head) to open accordion showing Body text.
Demo
The example video below demonstrates the Accordion’s interaction and intended functionality in action.