---
title: "Accordions"
canonical: "https://kb.uconn.edu/space/IKB/10781392971/Accordions"
format: markdown
---
This article covers how to setup **Accordions **within the [Classic Editor](#classic-editor) or the [Block Editor](#block-editor).

## > Macro (anchor)

**Classic Editor**

 Create a new **Visual Editor** widget in **Page Builder** for each item in the accordion.

1. For each Visual Editor widget, enable Accordion by selecting the checkbox at the bottom.
2. Add the title and content.

> ⚠️ The title of the visual editor will become the accordion header, and clicking on the title will expand the item's content. Thus, each Visual Editor with Accordion enabled must contain a title in the Title field.

> ✅ If you stack multiple Visual Editors with Accordion enabled on top of each other (in the same column), they will be grouped together, and clicking on one item’s titles will expand its content while collapsing all other items.

### Post Loop Accordions

You can also create accordions using the **Post Loop** widget. Doing so will create a group containing an accordion for every post that matches the loop settings. 

1. When using the **Page Builder **editor, begin by adding a **Post Loop **widget.
2. Enter a title for the accordion section and ensure that the Template is set to **content-accordion.php** from the dropdown menu.
  Establish the parameters for the post loop by selecting the type of post you wish to display, along with how you’d like those posts to be ordered. If you have many posts, you might consider using the **Posts per Page **field to limit the amount of posts that get displayed.
4. Visit the published page to view the accordions, editing the loop settings if needed.

## > Macro (anchor)

**Block Editor**

1. Select **UC Accordion Block**
2. Add **Title**
  1. Modify Settings and Styles
3. Add **Content**
  1. Modify Settings and Styles
4. Click on **Add Accordion**
  1. This is the same as selecting the **UC Accordion Item Block**

![image-20250110-165133.png](media://827f9a7b-acad-47fa-9196-a1c90a77cef4)


> 📝 You can also add these accordions** **to a sidebar. To do so, navigate to the **Appearance → Widgets** screen in your dashboard, add a **Post Loop** widget to the sidebar of your choice, and then follow the instructions above.