Collapsible sections or "accordions" are another way to organize long documents or pages, while taking up less screen space. Readers can flip between the sections of your document by clicking or tapping to expand one section of the document at a time. Below is an example of collapsed and expanded accordion respectively.
To create collapsible sections in your content:
Under Text Format, ensure your page is set to "Full HTML" instead of "Filtered HTML"
Click the Source button on the editor toolbar to switch the editor to source editing mode
Copy and paste the following markup into the source editor
Adjust the number and description of the sections to suit your content. When adding a new accordion section to your code, remember to update the values in the new section that reference "headingThree" or "collapseThree" so that the new section has unique values on the page (e.g. headingFour, collapseFour).
Markup
The following markup will show three accordion sections. All sections are closed when users initially load the page.
To add additional (closed) sections, add the following code directly below the last accordion section and above the closing tag. Remember to update any values referencing "headingThree" or "collapseThree" so it is unique on the page (e.g. headingFour, collapseFour).
