Skip to main content

Accordions

A dropdown component to show or hide content.

I'm an Accordion

You can add any content in here. Check out Accordion Group if you want to group multiple Accordions into a single display.

This is how you build an Accordion:

<Accordion title="Code for an Accordion">
Description for an Accordion.
</Accordion>

Attributes​

title string required
Title displayed in the Accordion preview.

description string required
Detail text displayed below the title in the Accordion preview.

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'
 }
};