Expand/Collapse list

Expand/Collapse list test

by roge roge

HTML

<h3> Expand/Collapse list</h3>
<ul>
   <li class="open"><a href="#" onclick="toggleList(this);">Item 1</a>
      <ul>
         <li>Item 1.1</li>
         <li>Item 1.2</li>
      </ul>
   </li>
   <li>Item 2</li>
   <li class="open"><a href="#" onclick="toggleList(this)">Item 3</a>
      <ul>
         <li class="open"><a href="#" onclick="toggleList(this)">Item 3.1</a>
            <ul>
               <li >Item 2.1.1</li>
               <li class="open"><a href="#" onclick="toggleList(this);">Item 3.1.2</a>
                  <ul class="open">
                     <li>Item 3.1.2.1</li>
                     <li>Item 3.1.2.2</li>
                  </ul>				
               </li>
               <li>Item 3.1.3</li>
            </ul>				
         </li>
         <li>Item 3.2</li>
      </ul>
   </li>
   <li class="open"><a href="#" onclick="toggleList(this);">Item 4</a>
      <ul class="open">
         <li>Item 3.1</li>
         <li>Item 3.2</li>
         <li>Item 3.3</li>
      </ul>
   </li>
</ul>

CSS

li.open {
	list-style-image: 	url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEUAAACZmZl+9SADAAAAAXRSTlMAQObYZgAAABNJREFUeAFj+AeENQwWDAIMQAAAHhICwcrz0MAAAAAASUVORK5CYII=");
}
li.closed {
	list-style-image: 	url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAJAQMAAADAY3TdAAAABlBMVEUAAACZmZl+9SADAAAAAXRSTlMAQObYZgAAABZJREFUeAFjZmA+wNwAhiXMGcwBzAsAI6QEKNehQp8AAAAASUVORK5CYII=");
}
li {
	list-style-image: 	url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAJAQMAAADAY3TdAAAABlBMVEUAAACZmZl+9SADAAAAAXRSTlMAQObYZgAAABZJREFUeAFjZmA+wNwAhiXMGcwBzAsAI6QEKNehQp8AAAAASUVORK5CYII=");
	padding-top: .2em;
	padding-bottom: .2em;
	font-size: 18px;
}

JavaScript

function toggleList(obj){
   var li = obj.parentNode;
   li.className = (li.className == 'open') ? "closed" : "open"
   var next = obj.nextElementSibling;
   while (next) {
      if (next.style)
        next.style.display = (li.className == 'open') ? "block" : "none";
      next = next.nextSibling;
   }
}