Accordion


The sidebar accordion, used in listing pages or as navigation, can hold multiple navigation items or to be used as a filter for content.

Each tab styling can be changed to open or collapse using aria-expanded, set true for open and false to close. Using JS this can be changed and to point to what each tab controls via aria-controls.

.p-accordion__panel visibility is affected by aria-hidden and again can be manipulated with JS.

Each tab button element should be wrapped by an element with a .p-accordion__heading class, per the W3C accessibility guidelines on accordions.

The wrapping element should either be a heading element or a div element with the attributes role="header" and aria-level set. aria-level should be set to the value appropriate within the page hierarchy.

Note:Clicking on the header toggles the display of accordion tabs. Accordion tabs should contain navigation or supplementary information, not main page content.

With aria attributes:

With heading elements:

Headings

Deprecated

The .p-accordion__tab--with-title pattern is now deprecated and will be removed in a future version of Vanilla.

It is being replaced by the updated, standard accordion implementation, described above.

Functionality

Please ensure the aria-control attribute matches an ID of an element. If aria-expanded is true, then the accordion will be open by default. When clicking on the accordion__tab, you must toggle the aria-expanded attribute on the toggle and the aria-hidden attribute on the panel.

Import

To import just this component into your project, copy the snippet below and include it in your main Sass file.

@import 'patterns_accordion';
@include vf-p-accordion;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.

React

You can use accordion in React by installing our react-component library and importing Accordion component.

See the documentation for our React Accordion component