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
true for open and
false to close. Using JS this can be changed and to point to what each tab controls via
.p-accordion__panel visibility is affected by
aria-hidden and again can be manipulated with JS.
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
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:
.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.
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 'patterns_accordion'; @include vf-p-accordion;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
For more information view the accordion design spec, which includes the specification in markdown format and a PNG image.