MoreLesson 231Free preview

Tree View

This lesson is part of How To · All levels

Summary

Tree view displays tiered data such as folders and files that can be opened or closed. Its HTML structure is a cluster list, while JavaScript handles clicks on the marker to display branches below it. The arrow indicator and aria-expanded attributes make open-close status easy to understand.

Key points

Use ul and li in conjunction to represent hierarchy
Hide the branch with display: none and then display it when the parent is opened
Arrows or carts can rotate to indicate open status
Update the expanded airspace so that the status of the branch is announced to the screen reader

Full lesson

Code examples and quizzes

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