# ✎ Technique: Expandable sections

**Source**: https://accessibility.huit.harvard.edu/technique-expandable-sections
**Parent**: https://accessibility.huit.harvard.edu/

Expandables (sometimes called “collapsible” or “disclosure widgets”) are simple interface patterns that allow you to expand and collapse content. They can be helpful accessibility aids as they give users the choice of revealing content to read it, or bypassing the content, making page navigation more efficient for screen-reader users and people using the keyboard or alternative input devices.

To ensure that they are accessible, it's important that expandable sections are coded so that their state (expanded or collapsed) and the relationship between the toggle button and the expandable content are established programmatically.

It's also important to ensure that the toggle functionality can be operated using the keyboard. This means including the toggle button in the focus order and supporting standard keyboard shortcuts (spacebar and Enter) to activate the button.

## Example

This code example shows the collapsed state. Note the `aria-controls` relationship attribute that establishes the relationship between the toggle button and the content (through the content’s `id`). Also note that the `aria-expanded` state attribute is set to false and, correspondingly, `aria-hidden` is set to true.

`<h3>`\
`<button data-action="disclosure" aria-controls="section-name" aria-expanded="false">Title of section</button>`\
`</h3>`\
`<p id="section-name" aria-hidden="true">Section content tincidunt turpis nec ultrices tristique. Aliquam bibendum metus dignissim dui placerat, sed porta urna blandit. Ut condimentum magna sit amet nulla finibus vestibulum.</p>`

This code example shows the expandable section in its expanded state. Note the change in the `aria-expanded` and `aria-hidden` values.

`<h3>`\
`<button data-action="disclosure" aria-controls="section-name" aria-expanded="true">Title of section</button>`\
`</h3>`\
`<p id="section-name" aria-hidden="false">Section content tincidunt turpis nec ultrices tristique. Aliquam bibendum metus dignissim dui placerat, sed porta urna blandit. Ut condimentum magna sit amet nulla finibus vestibulum.</p>`

### ✗ Bad example

In this example, the `<h3>` has been used as the toggle element. The `<h3>` element is not a natively interactive element, and so there's no way to focus it with a keyboard.

`<h3 aria-controls="section-name" aria-expanded="true">Title of section</h3>`\
`<p id="section-name" aria-hidden="false">Section content tincidunt turpis nec ultrices tristique. Aliquam bibendum metus dignissim dui placerat, sed porta urna blandit. Ut condimentum magna sit amet nulla finibus vestibulum.</p>`

## Code editor

[Code editor for the expandable pattern as a jQuery plugin (external link)](https://codepen.io/team/hwpdas/pen/VwvMBbR).

See also:

- [Techniques](https://accessibility.huit.harvard.edu/page-categories/techniques)
- [Focus](https://accessibility.huit.harvard.edu/accessibility-topics/focus)
- [Text](https://accessibility.huit.harvard.edu/accessibility-topics/text)
- [Screen reader](https://accessibility.huit.harvard.edu/access-technologies/screen-reader)
- [Keyboard](https://accessibility.huit.harvard.edu/access-technologies/keyboard)
- [Speech recognition](https://accessibility.huit.harvard.edu/access-technologies/speech-recognition)
- [Switch-based input](https://accessibility.huit.harvard.edu/access-technologies/switch-based-output)
- [Custom widgets and controls ✎](https://accessibility.huit.harvard.edu/content/custom-widgets-and-controls)
- [Keyboard ✎](https://accessibility.huit.harvard.edu/content/keyboard)
- [Provide name, role, and value information ✎](https://accessibility.huit.harvard.edu/content/provide-name-role-and-value-information)
- [Support keyboard interaction ✎](https://accessibility.huit.harvard.edu/content/support-keyboard-interaction)
- [Operable](https://accessibility.huit.harvard.edu/techniques/principles/operable)
- [Perceivable](https://accessibility.huit.harvard.edu/principles/perceivable)
- [Robust](https://accessibility.huit.harvard.edu/principles/robust)
- [Blind](https://accessibility.huit.harvard.edu/disabilities/blind)
- [Motor impairment](https://accessibility.huit.harvard.edu/disabilities/motor-impairment)
- [CSS](https://accessibility.huit.harvard.edu/web-technologies/css)
- [HTML](https://accessibility.huit.harvard.edu/web-technologies/html)
- [JavaScript](https://accessibility.huit.harvard.edu/web-technologies/javascript)