Show and hide content blocks

There are 2 different blocks you can use to create expandable sections where you can provide additional, useful information for the user – reveal and accordion.

The reveal block can make a page easier to scan by letting users reveal more detailed information only if they need it.

The accordion component lets users show and hide sections of related content on a page.

You could use accordion sections when you want to provide additional information without overwhelming the user with a long and text-heavy page.

Take a look at an example of an accordion block used for ‘The application process’ on the prison and probation jobs website.

The GOV.UK Design System has more about when to use an accordion.

This is an example of an accordion block:

Editing an accordion

To add content to an accordion section, you need to select that section by clicking near where it says ‘End of section‘. You’ll then see a blue outline around that section. When you hover over the ‘+’ symbol, it will say ‘Add block’.

To add a new section to your accordion, you need to make sure you select the whole accordion, rather than one section. Click near where it says ‘Accordion end‘ and you’ll see the blue outline around the whole accordion. When you now hover over the ‘+’ symbol, it will say ‘Add Accordion Section’.

The same goes for deleting just a section of your accordion, or the whole block – just make sure you have the right section or the parent accordion selected.