Accordions

Available on
iastate22
Sites+

Accordions can be used to organize large amounts of related content. They contain expandable sections that can be viewed by clicking on the “+” or collapsed by clicking on the “-” icon.

To begin, you must log in to the site and navigate to the page where the Accordion is located. After clicking "Edit" at the top of the page, click the pencil in the upper right-hand corner of the Accordion and select "Configure."

Add content to an Accordion

Add a title to your Accordion, a title to the section(s), and text to the body(s). Add additional sections using the “+ Add Section” button.

Add content to an Accordion instructions

Collapsing and rearranging sections

You can collapse sections by clicking on the “Collapse” button at the top for an individual section or “Collapse All” to close all sections.

Collapse instructions

 

Collapsing sections makes them easier to rearrange, which you can do by dragging the multi-arrow “Move” icon in the left column of each section.

Rearrange instructions

Update an Accordion

After you’ve adjusted the Accordion to your liking, click “Update.”

Update and Accordion instructions

 

Click “Save Layout” at the top of the page to save your changes and update the live page.

Save layout instructions

 

Now, you have an Accordion with sections that can be expanded by clicking on the “+” sign or collapsed by clicking on the “-” sign.

Expand and collapse an Accordion example

Edit an Accordion

If you change your mind about the arrangement of an Accordion's sections or have other updates, you can go back and edit the landing page and the Accordion. When you make an edit to the Accordion, a yellow warning message and asterisk will appear to remind you that your changes are unsaved. You can save them by clicking the green “Update” button and remembering to click “Save Layout” at the top of the landing page.

Edit an accordion block instructions