Collapsible

note

This component is intended for staff-facing use only.

Use a collapsible component to organise a page with a large amount of content into sections.

Collapsibles work best when a whole page is organised around them. Avoid using them only once on a page. They can work well in the main body of a page, or in a sidebar.

A summary list is a great way to format the content inside a collapsible.

Do not use collapsibles for more detailed information that only some users may need. Use a details component instead.

Open by default

Name

Firstname Lastname

Change name

Date of birth

13/08/1980

Change date of birth

Contact information

email@email.com

Address line 1
Address line 2
Address line 3

Change contact information

HTML

<section class="lbh-collapsible" data-module="lbh-collapsible">

<button

aria-expanded="true"

data-behavior="lbh-collapsible-toggle"

class="lbh-collapsible__button"

>

<h2 class="lbh-heading-h2 lbh-collapsible__heading">Contact details</h2>

<svg width="17" height="10" viewBox="0 0 17 10">

<path d="M2 1.5L8.5 7.5L15 1.5" stroke-width="3" />

</svg>

</button>

<div class="lbh-collapsible__content" data-behavior="lbh-collapsible-content">

Content here

</div>

</section>

React

You may prefer to control the behaviour of the component with a useState hook, rather than relying on the built-in imperative JS.

If you do this, you can remove the data-module and data-behaviour attributes.

const React, { useState } from "react";

const MyCollapsible = ({ children }) => {

const [open, setOpen] = useState(true);

return (

<section className="lbh-collapsible">

<button

aria-expanded={open}

className="lbh-collapsible__button"

onClick={() => setOpen(!open)}

>

<h2 className="lbh-heading-h2 lbh-collapsible__heading">

Contact details

</h2>

<svg width="17" height="10" viewBox="0 0 17 10">

<path d="M2 1.5L8.5 7.5L15 1.5" strokeWidth="3"/>

</svg>

</button>

<div className="lbh-collapsible__content" hidden={!open}>

{children}

</div>

</section>

);

}

export default MyCollapsible;

Closed by default

<section class="lbh-collapsible" data-module="lbh-collapsible">

<button

aria-expanded="false"

data-behavior="lbh-collapsible-toggle"

class="lbh-collapsible__button"

>

<h2 class="lbh-heading-h2 lbh-collapsible__heading">Contact details</h2>

<svg width="17" height="10" viewBox="0 0 17 10">

<path d="M2 1.5L8.5 7.5L15 1.5" stroke-width="3" />

</svg>

</button>

<div

class="lbh-collapsible__content"

data-behavior="lbh-collapsible-content"

hidden

>

Content here

</div>

</section>