Collapsible Content / Accordions


Collapsible content allows content editors to group information into headings, that can then be expanded and collapsed. This helps shorten the length of the page.

WP2 Implementation

In WP2, collapsibles were added by copying and pasting markup like the following into the source code:

<div class="collapsible-container light">

<div class="collapse-title">My title</div>

<div class="collapsible-content">My Content</div>


After the markup was inserted into the page, the user could switch back to the WYSIWYG editor and replace the default text “My title” with the heading they wanted to display and “My Content” with the text that they wanted collapsed.

There were 2 types of collapsibles: a fieldset and a collapsible container.

Migrating to WP3

Collapsibles have been renamed to accordions. Both the fieldset and the collapsible containers will map to the accordion paragraph in WP3.

To migrate an accordion:

  1. Locate the page where the accordion should be added and determine where on the page the accordions should be placed
  2. Follow the tutorial on adding an accordion container: You will need to copy and paste the relevant WP2 content into the corresponding accordion fields.
  3. Rearrange any other paragraphs on the page to place the accordion in the correct location