Accordion
Code symbol ^
Item name
Name of item [^]
Name of item [^^]
Modifier codes
A no heading modifier code (_) can be added to remove the heading.
A padding modifier code (!) can be used to add additional space before the accordion box.
The accordion component will restyle the item content in an accordion type structure.
The content in an accordion item is divided up by the Blackboard Heading style (H4). Each heading becomes an accordion button, and the following content is gathered into the hidden container under the accordion button. This repeats for each heading.
Warning
Any content preceding the first heading will be removed or may break the styling script.
Note
The lower heading levels of Sub-heading 1 and Sub-heading 2 in the Blackboard editor can still be used and is considered body content.
There are two types of accordions. The Multiple Open accordion allows any or all of the tabs to be open at the same time. The Single Open accordion only allows one tab to be open at a time.
Careful consideration should be taken when choosing to use and accordion, and what type of accordion to deliver your information.
Nielsen Norman Group have a useful article ‘Accordions Are Not Always the Answer for Complex Content on Desktops’ on the use of accordions for content and why you should and shouldn't use them.
Single open#
The single open accordion (^) will only allow one tab to be open at any one time.
Single open code symbol ^
Name of item [^]
Multiple open#
The multiple open accordion (^^) will allow more than one tabs to be open at the same time and will include an additional button at the top of the accordion that can be used to collapse or expand all the tabs at the same time.
Multiple open code symbol ^^
Name of item [^^]
Example
The following item title will restructure the content into a multiple open accordion (^^). The content consists of four headings, each followed by some text and an image. The headings become the tabs to open each accordion item and to show content within. Because a multiple open accordion was chosen an additional Toggle All button is added to the accordion header.
Lorem Ipsum information [^^]
