<< Click to Display Table of Contents >> Navigation:  Using script in HTML document > Usage examples > Convert nested list into expandable tree

 

<style>
li>ul {display: none}
li.show>ul {display: block}
</style>
 
<script type="passcript">
 
 $('li a').on('click', 'this.parent.toggleClass(''show'')');
 
</script>
 
<ul>
 <li><a href="#">Item1</a>
  <ul>
    <li>Subitem1</li>
    <li><a href="#">Subitem2</a>
      <ul>
        <li>Sub-Sub-Item1</li>
      </ul> 
    </li>
    <li>Subitem3</li>
  </ul>
 </li>
</ul>