Expander

Make a complex topic easier to digest by letting users reveal more detailed information only if they need it.

Use expander 

  • on pages where users find the amount of information overwhelming - they break down information into bite size pieces which the user can "expand", when they're ready to do so
  • for information for a wide audience, unlike the details component
  • when you see a clear user need for them

Test your content without an expander first. It may be better to:

  • simplify and reduce the amount of content
  • split the content across multiple pages
  • keep the content on a single page, separated by headings
  • use a list of links to let users navigate quickly to specific sections of content

 

How expanders work

The expander is a short link in a box that expands into more detailed text when a user clicks on it.

 

How to use expander

Create expander with the example raw HTML block below. Follow the instruction within the raw HTML code to alter the content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

More than 1 expander

It can work well to have several expanders. See the example below.