An accordion can be helpful if you want to display more information in a smaller area. With the accordion card, you can hide anything than the title and show the rest on demand.
Variations
- default: minimal styling and nothing more.
- --box: with border and padding.
Technical Details
- This component is progressively enhanced, showing everything without JS (like an open state).
- It is accessible. It uses a button element and the aria-expanded attribute to control its state.
- We only show a focus ring on :focus-visible and just on the SVG icon.
Resources
- Collapsible Sections - It is pretty much based on this.