1. Notes
  2. Using-accordion-component
  • Home
  • Works
  • Notes
  • About

Using the Accordion Component

February 2024

The Accordion component is a great way to organize content in an expandable/collapsible format. Here's how you can use it in your MDX content.

Basic Example

Multiple Items Example

Usage Tips

  1. Use accordions when you have a lot of related content that can be broken down into sections
  2. Keep the trigger text (headers) concise and descriptive
  3. Ensure the content within each section is relevant to its header
  4. By default, only one section can be open at a time (single mode)
  5. Use the multiple prop when users might need to compare information across sections

The accordion component is particularly useful for:

  • FAQs
  • Product specifications
  • Step-by-step guides
  • Terms and conditions
  • Navigation menus on mobile devices