Lists are one of the best ways to present information in an structured way, we can create different levels of depth according to categories or level of details… but sometimes when the information is too much, showing all the data from the beginning can overload the design, especially if we want to keep it simple and clean.
One way to having a list that shows an important amount of data and at the same time not hinder the rest of the design is making the list expandable and collapsible in a dynamic way. The list would initially be rendered collapsed, reducing the impact on the rest of the design, and on the user's experience as they navigate through the list, expanding and collapsing the items as they need. These expanding lists also feel interactive, making the site less static.
<ul class="expandingList"> <li>Item one <ul> <li> Item 1a <ul> <li> Item 1a-one <li>Item 1a-TWO </ul> <li> Item 1b <ul> <li> Item 1b-one <li>Item 1b-TWO <li>Item 1b-THREE </ul> <li> Item 1c <ul> <li> Item 1c-apple <li>Item 1c-banana <li>Item 1c-carrot </ul> </ul> <li>Item two <li> Item three <ul> <li> Item 3a <li>Item 3b </ul> </ul>