Expand/Collapse Lists

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:

  1. Drag and drop the List widget under the Content menu
  2. Select the list to display
  3. Click the Settings tab
  4. List template - Expand/Collapse
  5. 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

  • Title 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra rutrum est nec dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum convallis blandit dictum. Nam non justo quam. Phasellus sagittis metus quis nisi finibus, sed fringilla sem eleifend. Donec porta porttitor convallis. In posuere, purus a commodo elementum, quam velit volutpat risus, et tincidunt elit leo in massa.
  • Title 2
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra rutrum est nec dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Section Navigation
 
 
 
 
 
 
 
 
 
Support the next generation of Claflin Leaders
Your support provides educational enrichment through student schloarships, loan funds, instructional classroom equipment, preparing Claflin's students to be leaders of the future.