• Departments & Offices
• University Communications
• University Web & Design
• Web & Apps
• Cascade
• Help
• Building & Editing
• Rows
• Accordion List

The accordion list row offers one or more sections of collapsed content items — visitors select items in the list to expand and view the additional content. Your expandable content can include text, images, YouTube videos and buttons. 

Suggested Uses

• Present a list of frequently asked questions
• Organize lengthy content into collapsed sections

Create a New Row

• Select your rows storage folder — this is likely labeled _rows or similar. If you don't have one yet, build one now.
• From the top menu, select Add Content > Rows > Accordion List.

Available Fields & Options

The Basics

• Page Name: Required field; this is your row's file name in Cascade; customize the default name of row-accordion-list.
• Title: Required field; used as a section header for screen readers and should be meaningful.
• Show Title? 
  • If unchecked: The title is used by screen readers but not visually displayed.
  • If checked: The title is prominently displayed at the top of the row.
• Row Theme: Select one of the available colors as the row's default theme. Elements within the row will be color-coordinated and optimized for design and accessibility. When placing the row on a page, the theme can be customized for that page.
• Intro Text: Option to add simple text below the title and above the list or lists of content. Text appears center-justified and can include links, bold and italics.

Sections

The accordion list row allows for the grouping of your content into sections. Use the green + to add a section. Use the up/down arrows or drag and drop to reorder them.

• Section Title: Recommended if separating your entries into more than one section; displays at the top of the section.

Entries

You can add as many entries to a section as needed. Use the green + to add an entry. Use the up/down arrows or drag and drop to reorder them.

• Entry Title: Required field; this is the text a visitor will select to expand the entry content.
• Entry Content: Required field; this is the content a visitor will see after selecting the Entry Title.
  • Text options are limited to links, special characters, Heading 6, bold, italics, superscript, subscript, bulleted lists and numbered lists. 
  • Images may be added within the entry content by following the steps to insert a content image. Tip: the background color of the entry content area varies across row themes — be sure to review your content and adjust your images for optimal appearance, if needed.
  • Videos can be featured within the entry content by following the steps to embed a YouTube video. Tip: You do not need to include the "size" specification — videos in an accordion list are always the full-width of the content area.
• Button: Option to add up to two buttons within a single entry. Use the green + to add a button. Use the up/down arrows or drag and drop to reorder them. 
  • Button Text: Provide the text to appear on the button. Tip: The length of the text determines the size of the button — keep it short for an optimal appearance across devices. 
  • Internal Link: Use to link the button to an available Cascade asset.
  • External Link: Use to link the button to an asset not available within your Cascade Site.
  • Anchor: Use to specify an anchor for your internal or external link — no # symbol required. To link to an anchor located on the same page as the row, do not specify an internal or external link destination. New to anchors? Learn how to first create an anchor on your pages or rows.

Updating Row Content

• To update the content of a row, edit and publish the row file. 
• You do not need to publish the pages displaying the row.
• If a row is unpublished or deleted, it will no longer appear on any live pages.

Tip: If you move or rename a row file, you will then need to publish any pages displaying the row. Not sure which pages are using the row? Check for relationships to the row.

Example Accordion List Rows

Below, we offer sample rows to demonstrate suggested uses and best practices.