Plugin guidance

The 'Collapse' plugin

back to Plugin guidance

The 'Collapse' plugin

The Collapse plugin is used for showing and hiding content.

It can also group multiple pieces of show/hide content together. It comprises three plugins that have a specific hierachy:

  • Collapse
  • Collapse Trigger
  • Collapse Container

These are especially useful on an FAQ section on your website. 

How to use a collapse:

Step 1: Add a 'Collapse'

This is the parent plugin which contains a single trigger and container.

To add a collapse, insert a 'collapse' plugin from the hamburger menu in the sidebar:

Step 2: Add a Collapse Trigger

Whatever plugins placed in here (usually a Text plugin) becomes the button or trigger which toggles the show/hide.

Search for the 'Collapse trigger' within the 'Collapse 'plugin

Insert the plugin, name it and save it.

Make sure it has a logical name as this will be the 'ID' the plugin goes by. You should also note that you can't use spaces in the ID name. If you need to add a space, add un underscore. Generally, its best to refrain using any characters other than text and underscores for the ID.

Step 3: Add a Collapse Container

Whatever plugins are placed in here (usually a text plugin) are shown or hidden based on the Collapse Trigger being clicked.

Add a 'Collapse Container' following the same process in Step 2.

Important!

Make sure you name the trigger and container named the same thing, otherwise they will not be recognised as a pair, and the plugin will not function. 

For example, both the trigger and container must be called 'collapse-example-one' for them to open and close together.

How will this look on the site?

It is useful for hiding secondary or non-essential content, reducing percieved page 'size'. The reader can simply click on the text of the collapse and it will open/expand. To close/despand, they just need to click it again. 

Here is an example of how it should look in the page structure:

Here is an example of how the plugin will look on the page, unopened:

Here is an example of how it will look on the page, opened: 

Subscribe for the latest 

Join our community of professionals and gain access to valuable content that will help you navigate the ever-changing professional services landscape.

Our thinking

Read the latest