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:
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.
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.
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.
You can use accordion in React by installing our react-component library and importing Accordion component.