Web Guide: Toggled Accordion

Use the accordion list element to create smaller information units — FAQs, instructions, bios, etc.

The accordion list element prevents the page from becoming too long. Each toggle item is a separate page element so it’s easy to move around, reorder, add more or delete.

Using default style:

Toggle title with open default state

You can select open or close default state. Here, it is open, and you can read this text which normally would only be visible with a click.

Toggle title default

Toggle content goes here, click edit button to change this text.

Adding grey background color, 20px padding on left and right.

I have a grey background

Toggle content goes here, click edit button to change this text.

Adding grey color border with 3px radius, 20px padding on left and right.

i have a border

Toggle content goes here, click edit button to change this text.