navgh

Info:

<head><script type="text/javascript" src="ul.js"></script></head>
Add `col_ul` class to a `ul` to make it collapsible. Now all the multi-lvl `ul` will be hidden.
Demo notes:

paki: Add `span` around every multi-lvl `li` to act as a toggle.
karachi: Doesn't work because it has no `span` around it.

Source Code:

// https://github.com/maqboolkhan/Collapsible-list
window.onload = function() {
var li_ul = document.querySelectorAll(".col_ul li  ul");
for (var i = 0; i < li_ul.length; i++) {
    li_ul[i].style.display = "none" }; //for

var exp_li = document.querySelectorAll(".col_ul li > span");
for (var i = 0; i < exp_li.length; i++) {
    exp_li[i].style.cursor = "pointer";
    exp_li[i].onclick = showul; }; //for

function showul () {
    nextul = this.nextElementSibling;
    if(nextul.style.display == "block")
        nextul.style.display = "none"; //if
    else
        nextul.style.display = "block"; //else
} } //f() showul //window.onload

Demo:

coffee
- paki
  - karachi
    - North
    - West
  - lahore
- indian
- arbian
milk
honey

Example:

<!-- = = = = = ul.js = = = = = -->
<ul class="col_ul">

  <li><span>coffee</span>
	<ul>
	
	  <li><span>paki</span><!--`span` toggles nested `li`-->
		<ul>
		
		  <li>karachi<!--No `span`, so it won't work-->
			<ul>
			  <li>North</li>
			  <li>West</li>
			</ul>
		  </li><!--karachi-->
		  
		  <li>lahore</li>
		</ul>
	  </li><!--paki-->
	  
	  <li>indian</li>
	  <li>arbian</li>
	</ul>
  </li><!--coffee-->
  
  <li>milk</li>
  
  <li>honey</li>
  
</ul><!--.col_ul-->
<!-- = = = = = ul.js = = = = = -->

Ex:

<ul class="col_ul"> <li><span>coffee</span> <ul> <li><span>paki</span> <ul> <li>karachi <ul> <li>North</li> <li>West</li> </ul> </li> <li>lahore</li> </ul> </li> <li>indian</li> <li>arbian</li> </ul> </li> <li>milk</li> <li>honey</li> </ul>