Collapsible (accordion) sections on your page

You can create 'show and hide' sections (aka accordions) on your page.

Why use collapsible content?

Content can be collapsed or hidden on a page when it is not central to the user tasks of the page.

Hidden information implies it is optional for the user and the user can opt-in to view it by clicking/tapping the accordion.

How to make content collapsible

circle first icon on WYSIWYG toolbar
  1. Click the 'Insert collapsible' icon on the WYSIWYG toolbar. This adds the required accordion fields. 
  2. Highlight and replace the title and content fields as needed. The title will be the word the user clicks to expand the content to expose the 'content' you enter. 
  3. Save your content as a draft to view how your content is working.
  4. When you're happy with it the results, publish the update.

What those dotted outlines mean

The coloured dotted lines define the parts of the accordion container.

  • The red line shows where the collapsible content starts and ends.
  • The blue line surrounds the title. The title will show when the accordion is closed.
  • The green line contains the content that will be un-collapsed when the title is clicked.

Example

This example uses collapsible content.

Apples

Apples can be red or green and taste better crunchy.

Bananas

Bananas can be yellow or green and taste best in a smoothy.

Acknowledgement of Country

UTS acknowledges the Gadigal people of the Eora Nation, the Boorooberongal people of the Dharug Nation, the Bidiagal people and the Gamaygal people, upon whose ancestral lands our university stands. We would also like to pay respect to the Elders both past and present, acknowledging them as the traditional custodians of knowledge for these lands.