If you have a large number of items to show, then it would be very long list. You can solve the issue by nesting one block within another, you can create tree-like structures where each individual node can be expanded and collapsed.
You can follow the sample code for this tutorial below:
<script type=”text/javascript”>
function toggle(id) {
var e = document.getElementById(id);
if (e.style.display == ”)
e.style.display = ‘none‘;
else
e.style.display = ”;
}
</script>
<h3>Expand/Collapse in Tree Structure</h3>
<ul>
<li>
<a href=“#” onclick=“toggle(’node1′)”>Product 1</a>
<ul id=“node1″ style=“display:none”>
<li>Sub-product 1</li>
<li>
<a href=“#” onclick=“toggle(’node2′)”>Sub-product 2</a>
<ul id=“node2” style=“display:none“>
<li>Sub-sub-product 1</li>
<li>Sub-sub-product 2</li>
</ul>
</li>
<li>Sub-product 3</li>
</ul>
</li>
<li>
<a href=“#” onclick=“toggle(’node3′)”>Product 2</a>
<ul id=“node3″ style=“display:none”>
<li>Sub-product 1</li>
<li>Sub-product 2</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</body>