W3.CSSLesson 34Free preview

W3.CSS Accordions

This lesson is part of W3.CSS · All levels

Summary

Accordion is a set of panels that can be opened and closed so that only the required content appears. The plot is simple: the title is a button that changes the hidden state on the content panel using a little bit of JavaScript. This technique saves space while keeping pages short and organized.

Key points

The Accordion consists of a button title and a hidden content panel
Class w3-hide hides the panel until the title is clicked
The button elements on the title make the accordion accessible to the keyboard
Closing the other panel when one is opened keeps the user focused
Consistent panel structure makes it easy for users to understand.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.