Are you OK with cookies?

We use small files called ‘cookies’ on websitebuilder.service.justice.gov.uk. Some are essential to make the site work, some help us to understand how we can improve your experience, and some are set by third parties. You can choose to turn off the non-essential cookies. Which cookies are you happy for us to use?

Skip to content

This website is new - tell us what you think

Find out more

Using blocks

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.

Reveal

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

EXAMPLE

This is an example of a reveal block

Use the reveal to make a page easier to scan when it contains information that only some users will need.

Do not use a reveal block to hide information that the majority of your users will need.

You can add multiple paragraphs by hitting return. You can do basic formatting and add links, but you cannot add other content blocks.

Accordion

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:

EXAMPLE

Example accordion section title 1

You can add a limited set of blocks to create your accordion content – headings, paragraphs and lists.

You can add headings

You can add paragraphs

  • A bulleted list
  1. A numbered list

Example accordion section title 2

You can add a limited set of blocks to create your accordion content – headings, paragraphs and lists.

You can add headings

You can add paragraphs

  • A bulleted list
  1. A numbered list

A paragraph.

New section

Section content

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.