MoreLesson 223Free preview

Toggle Hide/Show

This lesson is part of How To · All levels

Summary

The toggle hide/show makes elements appear and disappear alternately when the button is clicked. The most direct way is to change the display property between none and block via JavaScript. A more neat approach uses CSS classes or hidden attributes, so appearance and behavior stay separate.

Key points

Display: none hides elements and removes them from the layout stream
The hidden attribute is a declarative way to hide the element.
Use classList.toggle to make the logic out/hidden easier to handle
Update the air-expanded on the button to make the status clear to the screen reader

Full lesson

Code examples and quizzes

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