Skip to main content

<AccordionGroup />

The accordion group component renders a collection of accordions.

Support​

The <AccordionGroup/> component is supported in domains, services, and all messages, changelogs, and custom documentation pages.

Usage​

  1. Include the <AccordionGroup/> component inside the markdown
    • e.g /events/MyEvent/index.mdx

Basic Example

---
#event frontmatter
---
<AccordionGroup>
  <Accordion title="Example 1">Hello</Accordion>
  <Accordion title="Example 2">Hello this is an example</Accordion>
  <Accordion title="Example 3">Another example</Accordion>
  <Accordion title="Example 4">Final example</Accordion>
</AccordionGroup>

Code example

Add code inside the Accordion to render code snippets.

---
#event frontmatter
---
<AccordionGroup>
  <Accordion title="Code snippet 1">
    ```js
    console.log('My code here');
    ``
  </Accordion>
  <Accordion title="Code snippet 2">
  ```js
    console.log('My other code snippet');
  ``
  </Accordion>
  <Accordion title="Schema example">
  ```json
  { "test": true}
  ``
  </Accordion>
</AccordionGroup>

Output example in EventCatalog​

Example output

Props​

NameTypeDefaultDescription
childrenAccordion(empty)Accordion components that are contained within the group