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.

View example of the accordion pattern

Design

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