How do I create a collapsible list?


I have a list of items that can have up to 50 items, and we only want to display the first 3, but have the remaining items in a "...47 more" style link which opens a scrollable popup. What is a good accessible solution?


There are a couple strategies for creating a list that includes an element to expose more list options.

One option is to create a list containing a <detail> and <summary> element. The primary list would contain however many options you want to show and the <detail> and <summary> element would contain a "Show more" disclosure that exposes the rest of the list when activated.

Another option is create a list that includes a "Load More" button, which will dynamically load the rest of the list options, instead of using a <detail> and <summary> disclosure. Then, use aria-setsize and aria-posinset to represent the overall list size as options are dynamically loaded when the "Load More" button is pressed.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.