#  Accordion 

 



 ##  

  expand\_more  

 
  

 

## How to add an Accordion component

### Step 1: Add and configure Accordion component

1. Add an Accordion component (see [Adding a component](/adding-component "Adding a component") for instructions on how to add a component).
2. Select the **Section Heading** tab to add an optional section that appears at the top of the Accordion component (see [Adding a component heading](/adding-section-heading "Adding a section heading") for details about adding a section heading).
3. Select the **Block Settings** tab.
4. Select the Accordion component default display from the **Display** menu: 
    1. Choose **All Closed** to display all Accordion panels closed.
    2. Choose **All Open** to display all Accordion panels open.
    3. Choose **First Item Open** to display the first Accordion panel open and all other panels closed.
5. Select the Accordion component behavior from the **Behavior** menu:
    1. Choose **Auto Close** to automatically close the open Accordion panels when the user opens another Accordion panel. With **Auto Close**, only one Accordion panel is open at a time.
    2. Choose **Stay Open** to leave Accordion panels open when the user selects another Accordion panel. With **Stay Open**, multiple Accordion panels can be open at the same time.
6. Check the **Show Controls** checkbox to provide **Open all sections** and **Close all sections** buttons with the Accordion component. These controls allow users to open and close all Accordion panels at once.

   ![Screenshot showing Accordion component settings with callout numbers marking the Display and Behavior menus and Show Controls checkbox.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-08/screenshot_accordion_settings.png?itok=eeosKifl) 

 

Choose how Accordion panels display **(1)** and behave **(2)** and whether to provide controls to expand and collapse all Accordion panels **(3)**.7. Add an optional **Page Anchor Link** to allow for links to the Accordion component (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")).
8. Select the **Color Settings** tab.
9. Select a color scheme from the **Component Color Scheme** menu and review the **Component Color Scheme Preview** to see the effect of changing the color settings.

### Step 2: Add an Accordion Panel item

1. Select the **Content** tab and select the **Add Accordion Panel** button.
2. Enter a descriptive heading for the Accordion Panel in the Heading field. Note that the heading also serves as the button label for opening and closing the Accordion Panel, so make sure it’s concise and descriptive.
3. In the **Body** area, you can add content, images and quotes within this section (see [Text Editor](/resource/text-editor "Text Editor") for details about using the toolbar and text input area). Add your content for the Accordion Panel in this area.
4. (Optional) Add additional components to the Accordion Panel content area by selecting the **Choose component** button in the **Components** section. Only use components that will display properly within an Accordion Panel.

### Step 3: Configure Accordion Panel item settings

1. Select the **Block Settings** tab.
2. Add an optional **Page Anchor Link** to allow for links to the Accordion Panel item (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")). This feature is useful for Accordion components with multiple Accordion Panel items, allowing for links to, for example, the third Accordion Panel item in a four-item Accordion component.
3. Once you have completed your Accordion Panel item configuration settings, choose **Save** to save the Accordion Panel item.

### Step 4: Save Accordion component

1. Preview the Accordion Panel item in the **Accordion Panels** section of the **Create new Accordion** dialog (note that the preview for Accordion Panels only displays Accordion Panel item headings). You can add more Accordion Panel items by clicking the plus sign below the first Accordion Panel item.
2. Once you have finished adding Accordion Panel items, choose **Save** to save the Accordion component.



 

---

 

##  Learn more about Accordions 

 



 ### Examples

Demo Site

See examples of an [Accordion used for page content](https://drupaldemo.harvardsites.harvard.edu/history#example-accordion) and an [Accordion used for an FAQ](https://drupaldemo.harvardsites.harvard.edu/faqs#example-faq-list-component) on the Department of Rocket Science demo site.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/Firefly%20rocket%20in%20space%209486.jpg?itok=zBGEAUN2) 

 

 

 

 ### Best Practices

Design System Website

Learn [best practices for using an Accordion](https://designsystem.harvardsites.harvard.edu/accordion) from the Harvard Digital Design System website.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2025-03/DSWebsiteIconNew.png?itok=HPgxFa1d) 

 

 

 

 ### Accessibility

Digital Accessibility Website

Review guidance on [supporting scanning and understanding](https://accessibility.huit.harvard.edu/support-scanning-and-understanding) from the Harvard Digital Accessibility website.



 

   ![Icons for touch, sight, accessibility, cognition, and hearing](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/thumb_das.png?itok=j55tHWpY) 

 

 

 

  

 

 

 

 



 

 See also:- [ Components ](/site-section/components)
- [ How-tos ](/content-structure/how-tos)