Accordion
Updated
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.
Note:Clicking on the header toggles the display of accordion tabs. Accordion tabs should contain navigation or supplementary information, not main page content.
Headings
New
To use headings in the accordion buttons use .p-accordion__tab--with-title
class on the button and .p-accordion__title
on the heading element inside it.
Heading levels from h2
up to h6
are supported in the accordion pattern. Heading h1
should not be used in the accordion, as it's reserved for the top-level title of the page. Also, make sure to use the same level of heading in all accordion buttons to ensure the same level in the document hierarchy.
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.
Design
For more information view the accordion design spec, which includes the specification in markdown format and a PNG image.