---
title: "Creating accordion sections"
date: "2022-03-24T15:49:50+00:00"
summary: "Learn how to create interactive accordion sections on your website using UIKit components. Discover step-by-step instructions for adding and customizing accordion containers and items, enhancing user experience and content organization."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/creating-accordion-sections"
id: "49c4933e-b38a-439d-9ad2-8620333b326f"
---

The UIKit include two section components for creating accordions. These are the **Text and accordion container section** and the **Accordion container section**. To use these sections:

1.  Drag an **Accordion container section** or **Text and accordion container section** onto your page. You will see that it includes a drop zone for adding Accordion items.  
      
    
    ![38cabc40-accordion-container.png](https://acquia.widen.net/content/c0173193-5510-438b-9204-57839e9b6052/web/38cabc40-accordion-container.png)
    
2.  Drag a **Text accordion item** into the drop zone. The Text accordion item includes a rich text editor for adding text and media.  
      
    
    ![6c196682-text-accordion-item.png](https://acquia.widen.net/content/4241a8b4-b8a4-482b-a8cf-640311c134fc/web/6c196682-text-accordion-item.png)
    
      
     
3.  To add additional accordion items, the easiest way is to duplicate an existing item and then change its content.  
      
    
    ![f0e6020a-duplicate-text-accordion-item.png](https://acquia.widen.net/content/d6d77e8c-5ebc-432a-8523-a6d3b5f791b8/web/f0e6020a-duplicate-text-accordion-item.png)