MoreLesson 177Free preview

Collapsible

This lesson is part of How To · All levels

Summary

This lesson discusses collapsible components that can be opened and closed to hide long content. The trigger button changes the status of the content and usually displays the arrow icon as a directional indicator. Good implementation updates the expanded areas as well as connects the buttons to the content area via the controls.

Key points

Use the original button with the aria-expanded changing between true and false
Hide content with hidden attributes or CSS classes, and animate at maximum height when necessary
Connect the buttons and content using the appropriate controls and ids
The arrow icon can be rotated by transforming so that the open status is easily recognizable

Full lesson

Code examples and quizzes

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