Skip to contentSkip to footer
Give feedbackv3.0.2

Revealable

Revealable sections allow you to ‘hide’ content that’s only relevant to some people visiting the page.

The ‘hidden’ content sits under a clickable h3 heading. Once clicked, the rest of the content is revealed.

They’re a great way to make a page easier to read - people can scan through quickly.

Bear in mind that hidden content can be easy for people to miss, so use the revealables sparingly - you should aim to use no more than 4 per page.

Content within the revealables is unlikely to be indexed in search engines. The 'toggle title' - the title inside the revealable - will be, so make sure it’s clear and descriptive.

Unstyled content inside header/toggle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada mattis euismod. In varius nisl vel ex eleifend, eget pellentesque sem feugiat. Ut tristique, augue eget pellentesque rutrum, justo nunc convallis leo, tempor rhoncus lacus metus efficitur odio. Phasellus metus erat, condimentum sit amet leo ac, viverra consectetur lorem.

<section class="revealable">
	<h3>Unstyled content inside header/toggle</h3>
	<p>Lorem ipsum.</p>
</section>

Adviser content inside revealable

This callout style is for content that only advisers should see. You should use it when you think advisers need more information to advise clients.

<section class="revealable revealable--adviser">
	<h3>Adviser content inside revealable</h3>
	<p>This revealable style is for content that only advisers should see. You should use it when you think advisers need more information to advise clients.</p>
</section>