How to Use the Accordian Feature to Collapse and Expand Text

Sometimes a webpage gets quite long, and you may want to break it up into smaller chunks to make it easier to skim.

An example of this is a FAQ (Frequently Asked Questions) page:

FAQ Accordian Collapsed

When the user clicks the + sign, the row expands to show the text in that section:

FAQ Accordian Expanded

Prerequisite:

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

Instructions

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.