Expandable box in closed state

Closed state

Expandable box in open state

Open state

How it works

  • An expandable box shows only part of the information and can be expanded by clicking or tapping on 'show more'.
  • The additional information is presented below the previously shown content, pushing content downwards.
  • Many but not all components can be expanded.
  • On page load, the box is presented in closed state.
  • Open boxes remain open until the user clicks or taps on 'show less'.
  • The background color can be chosen
  • The label ‘Show more’ and ‘Show less’ is editable.

How to use it

Show the primary content or abstract directly on the page. Include more detailed content within the expandable box.

Reference guide for publisher

AEM view

Within the author environment, components can be added to either the main section or the hidden section of the Expandable Box.

The expand and collapse default text can be overwritten.