Skip Navigation

Accordion

Accordions

When working within the Content Parsys all web components must first be placed inside of a Section Component

Accordion Htl and Accordion Entry Htl

Accordions are a very useful component, but they can be tricky. Read carefully to ensure that your accordion functions as it should, appears as you would like, and does not break anything on your page. Accordions require two parts:

  1. Accordion Htl
  2. Accordion Entry Htl

Usage

Use Accordions to Organize Long Pages
Accordion components help make lengthy pages easier to navigate by collapsing content into expandable sections. They are especially helpful for:

  • Frequently Asked Questions (FAQs)
  • Any content-heavy page where clarity and ease of use matter

They're a flexible tool to streamline your layout and improve the user experience.

How to Add the Components

Click within a section component to insert new components.

  1. Click the + icon.

  2. Choose Accordion Htl.

  3. After your Accodion Htl is on the page, click within the Accordion Htl to add the Accordion Entry Htl.
arrow pointing to the + icon on the component menu and another arrow pointing to the Bootstrap Column Control option on the insert new component menu
CMS screen showing the "Insert new Component" dialog box. An arrow with step #3 is pointing towards "Accordion Entry Htl"

How to Configure the Component

Adding the Accordion Entry Title

  1. Click anywhere on the Accordion Entry to enable the toolbar. Click the wrench icon to open Configure mode.
     

  2. In the Accordion Title field, enter the title you want to display.
     

  3. Click the check mark to save your changes and close the window. To cancel without saving, click the X.

Tip: Accordion titles act as clickable headers. Use short, clear wording to help users understand what content they’re expanding.

An arrow pointing to the wrench icon on the configure toolbar and the Accordion dialog pop-up with arrows highlighting the "Accordion Title" fields and the finish check mark.

Working within the Component

Adding Components to the Accordion

Now that you have your accordion entry added and named you can begin adding components into it.

Click within the accordoin entry component to insert new components.

  1. Click the + icon

  2. Choose the component you'd like to add.
CMS screen showing the plus + icon for inserting new components, and the "Insert New Component" dialog box that displays choices for adding new components.

Adding Additional Accordion Entries

  1. Click the Accordion Title to reveal the toolbar.
     

  2. Click the + icon to add a new component beneath the current entry.
     

  3. If selected correctly, you should only see Accordion Entry as the available option.

    • If you see multiple component options, go back and make sure you clicked directly on the existing Accordion Entry, not the innor or outer container.

Tip: Each Accordion Entry acts as a separate section within the accordion. Repeat these steps to add as many entries as needed.

CMS screen with arrow pointing to the "Accordion Title", the "Insert Component icon" and the corresponding "Insert New Component" dialog box with "Accordion Entry" as the only option.

Reordering Accordion Entries

  1. Click the Accordion Title to select the entry you want to move.
     

  2. Click and drag the Accordion Entry to a new position. As you drag, your entry will be displayed as a blue box and blue arrows will appear to show valid drop locations.
     

  3. Release your mouse to drop the entry in the desired location.

Tip: Make sure to drop the entry where the blue arrow appears to ensure correct placement.

 

CMS screen illustrating how the component turns to a blue box as you drag it around the screen. Blue arrows indicate where the component can be dropped into place.
Marketing and Communications
CMS Team
339 W Boyd Street, 3rd Floor
Norman, OK 73019
Updated 12/8/2025 by Marketing and Communications
CMS Team: cmshelp@ou.edu