How do I create a collapsible list?
Question
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?
Answer
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.
