Accordion Groups

Accordion Group

To group multiple <Accordion> elements into a single display, simply enclose them within the <AccordionGroup> tag.

Accordion with Callout

Feel free to add other components inside an Accordion, like Callouts.

Tip

Accordions are great show or hide content.

Accordion with Code Block

You can also add code blocks here.

const axios = require('axios');

let config = {
 method: 'get',
 maxBodyLength: Infinity,
 url: 'https://api.example.com/v1/items',
 headers: { 
    'Accept': 'application/json'
 }
};

Accordion group code example

  <AccordionGroup>

    <Accordion title="Accordion with Callout">
    Feel free to add other components inside an Accordion, like Callouts. 
      <Callout type="tip" title="Tip">
      Accordions are great show or hide content.
      </Callout>  
    </Accordion>

    <Accordion title="Accordion with Code Block">
    You can also add code blocks here.
    
      ```js
        const axios = require('axios');

        let config = {
        method: 'get',
        maxBodyLength: Infinity,
        url: 'https://api.example.com/v1/items',
        headers: { 
            'Accept': 'application/json'
        }
        };
      ```
    </Accordion>

  </AccordionGroup>