# Accordion

### Summary

The Accordion component allows you to add collapsible sections of content. You can specify the default state (expanded or collapsed) in the Accordion settings.

This section shows you how to add accordions.

Below you can see two accordions, one in its expanded form, and the other one collapsed.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-e6d609e1d4bf547f915bede7067745e2716810cc%2F2639724594.png?alt=media" alt=""><figcaption></figcaption></figure>

### Step 1 - Add the Accordion component <a href="#accordioncomponent-step1-addtheaccordioncomponent" id="accordioncomponent-step1-addtheaccordioncomponent"></a>

Click on “Add Accordion” as shown below.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-f8361ee82306a8d0e353d94fadcafce22f7327dd%2F2639560725.png?alt=media" alt=""><figcaption></figcaption></figure>

### Step 2 - Add an Accordion panel <a href="#accordioncomponent-step2-addanaccordion" id="accordioncomponent-step2-addanaccordion"></a>

Add content for your Accordion using the fields shown below.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-1d71cbd9fb806188f17f88a3987e7e3a8f79a59f%2F2639757366.png?alt=media" alt=""><figcaption></figcaption></figure>

1. Title - Add the title.
2. Content - Add the body text.
3. Expanded - Check this box to force the Accordion panel to be expanded by default.
4. Add Accordion panel - Click this button to add additional Accordion panels.
5. Expand all - Check this box to force all Accordion panels to be expanded by default.