Accordions: Expand/Collapse all button

Example of the widget's expand state and collapse state

The “Expand/Collapse All Widget” (expand_all) module allows you to configure and add a button to a panel that visitors can click on to expand or collapse all the accordions targeted on a page. An example of this module can be found on the page "Designated site contacts" of this website.

Prerequisites

For the purpose of this tutorial:

  • Your user role needs to be that of a webmaster or higher.
  • You need to be able to add the widget to a Panel page or a Mini panel. If these are not available on your site, please ask your webmaster to enable the “Expand/Collapse All Widget” (expand_all) module, or request that a member of the Support team enable them for you using the Service Desk request form.
  • You need to have already added accordions to the page. If this is not the case, please refer to the article "Styling your content as a collapsible accordion" for further details.

Adding the button to a Panel page or Mini panel

For this tutorial, we will be adding the widget to a Panel page. But the steps are the same for Mini panels.

  1. Navigate to Structure and then Pages.
  2. Find the page on which you wish to add the widget and click on "Edit".
  3. In the left menu, click on "Content". You should now see a layout of your page.
  4. In the top-left corner of one of the regions, click on the gear icon. A dropdown menu will appear. Select "Add content".
  5. In the pop-up window, select "uOttawa Widgets" and then "Expand/Collapse All".
  6. You will now be given a few options (see image below).
    1. "Expand All" text: This setting allows you to change the text that appears on the button.
    2. "Collapse All" text: This setting allows you to change the text that appears on the button.
    3. Define the expand/collapse group by: This setting allows you to specify whether you want the widget to affect all accordions on the page, or only a select few (defined by either a CSS ID or a CSS class).
    4. Initial button state: Define whether the button's initial state should read "Expand All" or "Collapse All". You should generally leave it to the default setting (Expand All).
  7. Once you're done, click on "Finish" to add the widget.
  8. Finally, click on "Update and save" to save all your changes on the page.
Example settings used by the Expand/Collapse All widget

 

» Submit feedback
    Types: 
  • User Guide
Back to top