O'Reilly logo

Web Development Recipes, 2nd Edition by Chris Johnson, Mike Weber, Chris Warren, Brian P. Hogan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Recipe 9Accessible Expand and Collapse

Problem

When we need to present long, categorized lists on a website, the best way to do it is with nested, unordered lists. However, with this kind of layout, it can be hard for users to quickly navigate, or even comprehend, such a large list. Anything we can do to assist our users will be appreciated. Plus, we want to make sure that our list is accessible in case JavaScript is disabled or a user is visiting our site through a screen reader.

Ingredient

  • jQuery

Solution

A relatively easy way to organize a nested list, without separating the categories into different pages, is to make the list collapsible. This means that entire sections of the list can be hidden or displayed to better convey selective information. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required