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.

Default

With heading elements

With tick elements

When checkboxes or radio buttons are used inside accordion panels add has-tick-elements class name to the panel p-accordion__panel element, to properly align tick elements with accordion controls.

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 Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;

@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