Creating collapsible sections for content

Sometimes there may be text for a page that results in an extremely long scroller, especially on a mobile device.

Or there may be a series of questions and answers that would be better suited to collapsible sections so the user can focus on only the questions they want to read.

Web policy is that there be only one Bootstrap Collapse on a page. You can have as many sections/questions as you like in the one Bootstrap Collapse but there should be only one instance of a Collapse on the page. Multiple Bootstrap Collapses on a single page can cause errors in the way the collapses function.

Also, editors should not attempt to put one Bootstrap Collapse inside of another Boostrap Collapse. This will cause functional errors on the page.

Collapsible sections can be created in the Body field of the Create Page (or Create Event, Create News Article) screen by selecting the Bootstrap Collapse icon in the tool bar.

Content Collapse icon

Selecting that icon will open the Collapse Content editing window.

Collapsible content editing window

Select + Add New Item to begin placing your content.

Collapsible content editing a single item

Each time you select + Add New Item an additonal Title field and Content field will be added.

Place your section titles, subheads or questions in the Title section and the content or answers in the Content section.

You can add as many collapsing items as necessary. Delete items with the red X icon on the right.

Collapsible edit window with text added

Once you have all the section titles and content entered select OK to return to the regular page editing screen. Remember to Save your page.

The collapsible sections will appear like this:

Example of collapsing sections on a web page.

Selecting any section will open it and display the text associated with the subhead or question.

Example of an open collapsing section on a web page

Collapsing sections allow the editor to have more control over content and how it is displayed to the audience.

Note: Web policy is that there be only one Bootstrap Collapse per page.