Accordion

Side bar accordion, used in listing pages or as navigation. Can hold multiple navigation items or to be used as a filter of content. Use to hold filtering items (header and content if available). Do not use to display page 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 effected by aria-hidden and again can be manipulated with JS.

View example of the accordion pattern