Accordions

Accordions are a way of showing a list of longer / more detailed items in a condensed matter.

Accordion panels should change colour slightly when hovered / open to help indicate that they can be interacted with, and the accordion content should have a background colour that is different from both the accordion panels and the surrounding background colour.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi quis magnam iure numquam ab libero?

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit, culpa.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur soluta ducimus maxime sed, atque fugiat dolorem, a hic harum quaerat non illo suscipit! Voluptatum deserunt numquam voluptatibus libero? Vitae, minus.

To use an accordion, copy the HTML, CSS, and JS from the codepen below, and replace the sample content in the HTML.

To change the number of accordion sections, simply add or remove copies of the .panel div

See the Pen Accordions by Tyson Foster (@Foster-Design-System) on CodePen.