Expandable Content

Expandable content can be used to temporarily hide content on a page. The user must choose to view the content by clicking to expand it.

Expandable content can behave in one of two ways. It is either always expandable or expandable on mobile only.

Add expandable content using the Content Blocks content type '03. Expandable Content'.

For both behaviours the title of the box needs to be short and descriptive. This is the only information the user will have to encourage them to expand the content. It should be sentence case and less than 30 characters.

We recommend that you limit the amount of expandable content used on a single page. It should be used for supplementary information or for content intended for a specific audience, eg entry requirements for different qualifications. Nothing essential should ever be hidden.

Expandable content shouldn't be used to hide lots of text - aim for around 100 words per block.

Mobile collapse box

This content is expandable on mobile only.

The box collapses for screen sizes smaller than tablet portrait view. Try resizing your browser to see how it works.

Expandable box

This content is always expandable. It looks the same on desktop and mobile.

Users must always click to view the content in this box.

If you're using an image in this area you will need around 100 words of text or the image will not flow properly. The image size should be 680 x 402px.