Pages with collapsible links and content can be used to display FAQs, staff listings, and other types of content in Cascade.
A page with collapsible content contains two primary elements:
- the collapsible link: the text you click to reveal the desired content.
- the collapsible content: the content that is revealed by clicking on the collapsible link.
Below is an example from the Financial Aid website:
There are two types of pages with collapsible content in Cascade:
- FAQ pages—allows for a single set of collapsible links and content
- Collapsible List pages—allows for multiple sets of collapsible links and content
Understanding the Different Formats
Before creating a new page in Cascade, it’s helpful to understand the two different formats for displaying collapsible content.
An FAQ page is suitable if you have a single group of text-only items (links, questions, phrases, etc.) you want to display with collapsible content.
A Collapsible List page is suitable if you have multiple groups of items you want to display with collapsible content. This may include a list of categorized questions, staff listings, etc. An important difference between an FAQ page and a Collapsible List page is that the latter allows you to add descriptions before each collapsible link. Keep this in mind if you have images or other content you want to display above the collapsible links.
FAQ Pages in Cascade
An FAQ page has two general parts: an introductory section, and a list of collapsible items. Returning to the example on the Financial Aid website, the introductory section is a simple header that is followed by a list of collapsible questions.
In Cascade, the introductory section is identical to the content section of a second level page, as shown below. Note that although in this case the introduction is a simple header, you can also add introductory text, images, videos, or other content.
Formatting an FAQ Page
When formatting the introductory section of an FAQ page, make sure the header is set to Heading 1. To do this, highlight the header text and choose “Heading 1” from the “Formats” dropdown in the toolbar.
Below the header you can choose to add introductory text, images, or other content. Once the introductory section is formatted, you can add the collapsible content.
The collapsible content in an FAQ page has two parts to it:
- the “Question” – the text that will become the collapsible link, and
- the “Answer” – the content that is displayed upon clicking on the collapsible link.
Note that although these fields are titled “Question” and “Answer” you can use them to display any type of collapsible content, such as staff listings.
You can add additional Question/Answer fields by clicking on the green plus symbol (+) in the upper right hand corner of the item box. To remove a Question/Answer item, click on the red X symbol (x). You can also reorder the items by clicking on the up or down arrows.
Collapsible List Pages in Cascade
A collapsible list page has three general parts: an introductory section, collapsible items, and groups that organize the collapsible items. Below is an example from the Music website.
In this example, “Music Department FAQs” is the header in the introductory section. “Applying to Wesleyan” and “Music Major & Courses” are groups with unique collapsible content listed below.
Note that the introductory section of collapsible list pages is identical to that of FAQ pages.
Formatting a Collapsible List Page : Groups
Formatting a collapsible list page is similar to formatting an FAQ page, with some important differences. After formatting the introductory section, you can create and edit groups. On the Music FAQ page, there are four groups, the two shown above are “Applying to Wesleyan”:
And “Music Major & Courses”:
Enter the name of the group in the field titled “List Item Group Name,” this will become a header for the items listed under the group.
To add a group, click on the green plus symbol (+) in the upper right hand corner of the item box. You can remove a group (and the items listed under it!) by clicking on the red x symbol (x). You can also reorder the groups by clicking on the up or down arrows.
Under each group, you can add list items, the collapsible content to be displayed. List items are similar to the Question/Answer items of FAQs.
Formatting a Collapsible List Page : List Items
Each group will have its own set of list items with collapsible content. Below is the first list item under the “Applying to Wesleyan” group of the Music FAQ.
Note that there are “Collapsible Link” and “Collapsible Content” fields that operate exactly as the “Question” and “Answer” fields of an FAQ page. The text entered into the “Collapsible Link” field becomes the link that when clicked reveals the content in the “Collapsible Content” field.
There is one significant difference between List Items and FAQ items. Note that there is a “Description” section above the “Collapsible Link” field. You may add a description before each collapsible link. This description could include introductory text, images, etc. and will appear above the collapsible link. You may also choose not to include a description as exampled in the Music FAQ page.
Organizing List Items
You can add additional collapsible list items by clicking on the green plus symbol (+) in the upper right hand corner of the item box. To remove a list item, click on the red x symbol (x). You can also reorder the items by clicking on the up or down arrows.
Note that each group you create will have its own set of collapsible list items under it.
Other Uses for Collapsible Pages
FAQ pages and Collapsible List pages may be used to display content other than FAQs. For example, the CAPS website uses a collapsible list page to display a staff listing.
Collapsible content pages are useful and easy to create once you understand how the parts of the page come together.