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.

Usage

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

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