• Departments & Offices
• University Communications
• University Web & Design
• Web & Apps
• Cascade
• Help
• Building & Editing
• Tools & Techniques
• Collapsible Lists

Collapsible Lists

Do you have a page with a lot of content divided up using Heading 5s or Heading 6s? Would you like to offer a "consolidated" view of your content when your visitors first land on your page? You may want to consider the "collapsible list" content feature.

A collapsible list will show and hide a given section of content when its heading is clicked. The collapsible list will appear initially as a series of Heading 5s or Heading 6s with an arrow next to each. Click a heading once to expand the content, and again to close it. You can see this feature in action on our office's presentations page.

Note: Content that is collapsed using this feature is not as "visible" to search engines. Ensure key words are included elsewhere on the page and in your headings to help search engines and potential visitors find the page.

How to create a collapsible list:

1. Create a one column table with a row for each section of content to be collapsed — be sure to follow the step for including a caption for screen readers. Do not resize your table by clicking and dragging the corner element. This can lead to an inconsistent layout across device and browser sizes, notably as gaps between your collapsed sections of content.
2. In each cell, start with either a Heading 5 or Heading 6 to serve as the clickable area to open/close the content. Tip: To organize content within collapsed sections using headings, be sure to use a Heading 5 for your open/close heading, and Heading 6s within the collapsed content.
3. Below the heading, enter the content to be collapsed in the same table cell. Repeat for each section of content, placing each section in its own table cell.
   

   

4. Apply the collapsible format to the table: Select your table by placing your cursor anywhere within the table, click "table" in the element path breadcrumbs at the bottom of the editor. Then select collapsible from the Formats >> Custom sub-menu.
5. Click Preview Draft to review your draft and test the expand/collapse feature.
6. Click Submit >> Check Content & Submit. Then publish.