How to Use the Accordian Feature to Collapse and Expand Text

Sometimes the content on a webpage gets quite long, and you may want to break it up into smaller chunks to make it easier to skim using the accordian feature.  FAQ (Frequently Asked Questions) pages often use accordians.

An example of this is the College Leadership page on the CALS site:

Accordian Feature Example

When the user clicks the title and name, the row expands to show the text in that section:

Accordian Feature Expanded Example


  • To use this feature, you must be using the theme A UW Madison Theme.  For more information on changing themes, please contact
  • Helpful but not required – some familiarity with using the Advanced Content Editor.


1. Create or edit the Page where you want to insert the expanding text.

2. At the top of the Page in the Advanced Formatting, Page Editor section, choose Advanced Content Editor.  The Page changes to show a Page Content Options box.

3. Click Select Content Layout.  Choose Full Width from the popup menu.  This adds a full-width row.

4. Scroll down to the Full Width Content Options box.  Click Add Full Width Content.  Choose Accordian Panel from the popup menu.

5. Enter the descriptive content or question and the section content per the diagram below:

Accordian Pane lField Diagram

Example from above in edit mode:

Example Adding an Accordian Row

6. To add the next section, click Add Row.

7. Scroll up, and in the right column (two column view), click Update.

8. Click View Page to see the finished page.