Skip directly to search Skip directly to A to Z list Skip directly to navigation Skip directly to page options Skip directly to site content

Collapsible Modules

Expand All expand all Collapse All collapse all

On This Page


Little girl playing with blocks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus sem id risus facilisis tempor. Vivamus nunc sem, tristique id ipsum sed, imperdiet eleifend felis. Nulla id ex a lacus scelerisque tincidunt in hendrerit nunc. Aliquam tempus pellentesque nisi, id sollicitudin turpis lobortis quis. Etiam eu dui urna. Suspendisse fringilla, mi quis accumsan elementum, arcu tortor tincidunt sem, id dictum sem ex in est. Nam ornare nibh vitae risus rutrum faucibus. Morbi quis diam a elit auctor molestie. Donec dignissim augue ac bibendum sagittis.

How to Build These Modules

Creating Collapsible Modules

The following types of WCMS modules can be made collapsible/expandable:  List Module, Text-Box Module (single-use and reusable), Q&A Item, and Leadership Profile.

To create a page with expandable/collapsible modules, set the “Collapsibility” of the modules and, for optimal usability, add “expand/collapse all” controls.

To set module collapsibility:  When adding/editing list modules and text-box modules, find the “Collapsibility” field in the Settings form for the module and set it to “Collapsible (Open by Default)” or “Collapsible (Closed by Default.”  (Tip: Set all expandable/collapsible modules to the same value.)
To add “expand/collapse all” controls: You have two options for adding these controls to your page:

Displaying “Expand/Collapse All” Controls

You have two options for adding “Expand/Collapse All” controls to the published page.

  • To display the controls at the top of the page, in the Display Options panel for the parent page, check the option “Show Expand/Collapse Options (Top of page).”
  • To display the controls elsewhere on the page:  Use the Add Element option in Visual Composer or the WYSIWYG Editor to add a module of the type “Expand/Collapse” in the desired location. (In the module Settings form, you can further control the mule position by setting the Alignment to Float Left, Float Right, and Center.

Both approaches were used for this page, so there are two sets of “Expand/Collapse All” controls.

Expand All expand allCollapse All collapse all

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur, magna a maximus efficitur, dolor tortor sodales nisl, id rhoncus felis tellus vel ante. Nulla sit amet tellus ligula. Nunc eleifend vehicula bibendum. Nulla facilisi. Ut commodo finibus placerat. Etiam malesuada nibh vel turpis vestibulum iaculis. Quisque est urna, varius volutpat sapien at, fringilla tempor lorem. In gravida fringilla massa quis lacinia. Morbi et tincidunt velit. Vestibulum nec enim hendrerit, consequat tortor sed, venenatis neque. Etiam lacinia fringilla lacus, eu ultricies neque lacinia sit amet. Quisque mattis ante ultricies tristique luctus. Curabitur erat velit, cursus a pellentesque quis, sagittis at lorem.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur, magna a maximus efficitur, dolor tortor sodales nisl, id rhoncus felis tellus vel ante. Nulla sit amet tellus ligula. Nunc eleifend vehicula bibendum. Nulla facilisi. Ut commodo finibus placerat. Etiam malesuada nibh vel turpis vestibulum iaculis. Quisque est urna, varius volutpat sapien at, fringilla tempor lorem. In gravida fringilla massa quis lacinia. Morbi et tincidunt velit. Vestibulum nec enim hendrerit, consequat tortor sed, venenatis neque. Etiam lacinia fringilla lacus, eu ultricies neque lacinia sit amet. Quisque mattis ante ultricies tristique luctus. Curabitur erat velit, cursus a pellentesque quis, sagittis at lorem.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur, magna a maximus efficitur, dolor tortor sodales nisl, id rhoncus felis tellus vel ante. Nulla sit amet tellus ligula. Nunc eleifend vehicula bibendum. Nulla facilisi. Ut commodo finibus placerat. Etiam malesuada nibh vel turpis vestibulum iaculis. Quisque est urna, varius volutpat sapien at, fringilla tempor lorem. In gravida fringilla massa quis lacinia. Morbi et tincidunt velit. Vestibulum nec enim hendrerit, consequat tortor sed, venenatis neque. Etiam lacinia fringilla lacus, eu ultricies neque lacinia sit amet. Quisque mattis ante ultricies tristique luctus. Curabitur erat velit, cursus a pellentesque quis, sagittis at lorem.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur, magna a maximus efficitur, dolor tortor sodales nisl, id rhoncus felis tellus vel ante. Nulla sit amet tellus ligula. Nunc eleifend vehicula bibendum. Nulla facilisi. Ut commodo finibus placerat. Etiam malesuada nibh vel turpis vestibulum iaculis. Quisque est urna, varius volutpat sapien at, fringilla tempor lorem. In gravida fringilla massa quis lacinia. Morbi et tincidunt velit. Vestibulum nec enim hendrerit, consequat tortor sed, venenatis neque. Etiam lacinia fringilla lacus, eu ultricies neque lacinia sit amet. Quisque mattis ante ultricies tristique luctus. Curabitur erat velit, cursus a pellentesque quis, sagittis at lorem.

TOP