Collapsible containers

This is a series of containers, each holding a heading and some content. JavaScript enhances the markup, collapsing all containers and inserting buttons inside the headings to toggle them open/closed. The JavaScript looks for the presence of the data attribute data-component="collapsibles" on the outer container and data-heading="collapsibles" on the headings.

The component takes inspiration from the GOV.UK Design System accordion component.

Panel 1 heading

This is a paragraph of text.

Here is another paragraph of text that intentionally contains a lot more words inside it in order to fill the width of the page successfully to check layout and so forth.

Paragraph on Wikipedia

Panel 2 heading

This is a paragraph of text.

Here is another paragraph of text that intentionally contains a lot more words inside it in order to fill the width of the page successfully to check layout and so forth.

Panel 3 heading

This is a paragraph of text.

Here is another paragraph of text that intentionally contains a lot more words inside it in order to fill the width of the page successfully to check layout and so forth.

Panel 4 heading

This is a paragraph of text.

Here is another paragraph of text that intentionally contains a lot more words inside it in order to fill the width of the page successfully to check layout and so forth.

Considerations

Buttons shouldn't use the pointer cursor, so we need to ensure the buttons have sufficient affordance by other visual means. The icon and show/hide help text help to achieve this, but we can also make use of background-color, border and/or box-shadow styles.

Aligning the button content to the leading edge reduces the risk of it being missed by people using screen magnification software.