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.
How to create a collapsible list:
- 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.
- 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.
- 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.
- 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.
- Click Preview Draft to review your draft.
- Click Submit >> Check Content & Submit. Then publish.
