Collapsibles

The editor supports the use of Collapsible information throughout the site. These elements are useful for long lists of questions like an FAQ where the information can be hidden until needed.

Example Shortcode

[collapsible heading="Collapsible Title"] Content [/collapsible]

The opening and closing ([collapsible][/collapsible]) shortcode tags must wrap the content you would like to expand and collapse, as in the example above.

The shortcode requires the “heading” attribute, with other optional attributes:

• heading="heading-text"  – Specifies what text should be displayed and used as the clickable text to trigger the expansion or collapse.
• elem="h5" – Sets the style of the heading. For this theme we recommend the h5 heading style.
• id="myidname" – Adds an id attribute to the clickable text.
• open="true" – Keeps the collapsible section open by default, but allows it to be closed.

You can specify different background colors by adding one of the following IDs.

• id="blue" – Specifies a blue background color
• id="green" – Specifies a green background color
• id="pink" – Specifies a pink background color
• id="yellow" – Specifies a yellow background color

This shortcode supports linking to content within the collapsible section. When a user follows a link to content within a collapsed section, that section will automatically expand. To implement this type of link, add an anchor tag to the content within the [collapsible] shortcode and assign it an id attribute, for example, <a id="destination1">. You can link to this anchor from within the same page (<a href="#destination1">) or from an external source (<a href="http://www.bu.edu/yoursite/yourpage/#destination1">).

Examples of Collapsibles