ButtonsLesson 105Free preview

Read More Read Less

This lesson is part of How To · All levels

Summary

Read more read less is a pattern to hide some of the long text and display it when the user presses a button. Once opened, the button changes to read less to fold the content back. The subtle high animation makes change feel comfortable, while the aria-expanded attributes keep accessibility.

Key points

Additional text is hidden with max-height: 0 and overflow: hidden.
Open class raises the max-height so that the content can be animated.
JavaScript toggles classes and changes the button labels.
The aria-expanded attribute tells the screen reader whether the content is open.
Use a fairly large max-height or scroll-height to keep the long content from being cut.

Full lesson

Code examples and quizzes

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