An accordion (or collapsible) card component can be helpful if you want to display more information in a smaller area. Using it, you can hide anything other than the title and show the rest on demand.
- It uses a button element and the
aria-expandedattribute to control its state and to make it more accessible.
- We only show a focus ring on
:focus-visibleand just on the SVG icon.
- Collapsible Sections - It is based on this.