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.

Technical Details

  • It uses a button element and the aria-expanded attribute to control its state and to make it more accessible.
  • We only show a focus ring on :focus-visible and just on the SVG icon.