Banner image SITE-LANGUAGE-en-ICON BROWSER-LANGUAGE--IMAGE
Content / help / expandable .. concise-view << previous next >>

23 webDevMethods.php

Expandable nested lists

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.

The lists can be expanded and collapsed dynamically and can contain multiple levels of nesting without the need to manage all the different levels. There are only two different type of node, which keeps things as simple as possible, using only HTML, javascript and CSS and trying to avoid any complex technique.

Code for an expandable / collapsable list

  1. UL has class expandingList and all other sub-classes are controlled by the js
  2. Sub-level lists can be more than one level down.
  3. Requires JS component biscuits-expandlist.js function setExpandList()
  4. You can add optional Expand All / Contract all buttons
  5. Style elements should be added via other classes. The class expandingList is only for the functionality , not the visible style . Note: Example class ="biglist"

The HTML Code

<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>




iBiscuits LOGO