Description
An Expand/Collapse section is a vertically stacked list of headers that can be clicked to reveal or hide content. Expand/Collapse sections are useful for shortening long pages of content into broad, easy to scan topics. They are not useful if critical content would be hidden from a site visitor and only visible upon expansion.They are a good choice instead of tabs when you have a lot of items (three or more) or the items have longer labels, e.g. an FAQ section where the label is the question.
An Expand/Collapse section is a vertically stacked list of headers that can be clicked to reveal or hide content. Expand/Collapse sections are useful for shortening long pages of content into broad, easy to scan topics. They are a good choice instead of tabs when you have a lot of items (three or more) or the items have longer labels, e.g. an FAQ section where the label is the question. They are not useful if critical content would be hidden from a site visitor and only visible upon expansion.
Adding and Editing
Expand/collapse lists are managed using the Lists content type. To create a new expand/collapse list, click Content > Lists, then create the list items.
To add an expand/collapse list to a page:
- Drag and drop the List widget under the Content menu
- Select the list to display
- Click the Settings tab
- List template - Expand/Collapse
- Save
Code
Expand/Collapse lists can also be manually created within the content editor using the following code.
<ul class="accordion">
<li>
<div class="title">[Title]</div>
<div class="content">[Content]</div>
</li>
<li>
<div class="title">[Title]</div>
<div class="content">[Content]</div>
</li>
<li>
<div class="title">[Title]</div>
<div class="content">[Content]</div>
</li>
</ul>
Example