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.

Warning:This pattern requires JS to be functional.

View example of the accordion pattern

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.

Design

For more information view the accordion design spec, which includes the specification in markdown format and a PNG image.