Skip to main content

Accordion Documentation

Brief Description​

Accordion is a React component that creates an expandable and collapsible accordion section, ideal for displaying content in a compact, organized manner.

Usage​

The accordion can contain any markdown content you wish to display.

Parameters​

  • title (string, required): The text to display as the accordion's header.

  • children (React node, required): The content to be displayed when the accordion is expanded.

Return Value​

Accordion returns a React component that renders an accordion UI element.

Examples​

Basic Usage​

<Accordion title="Click me to expand">
  This is the content that will be shown when the accordion is expanded.
  
  You can include any markdown content here.
  - List items
  - More items
  
  Or even code blocks!
</Accordion>

Notes or Considerations​

  • The accordion is collapsible by default, meaning it can be opened and closed by clicking on the title.

  • Only one accordion section can be open at a time within a group of Accordion components.

  • The content inside the accordion supports Markdown formatting, allowing for rich text representation.

  • Ensure that the content passed to Accordion is not too lengthy, as very long content may affect user experience.

  • The component automatically handles the styling and behavior of the accordion, including the expand/collapse animation.

Dev-Docs AI Bot

Circular button