Folder Like Structure

by Kenneth Stoddard

HTML

<ul class="container">
  <li class="folder">Primary
    <ul class="sub-folder hidden">
      <li>Secondary</li>
      <li>Secondary</li>
      <li>Secondary</li>
    </ul>
  </li>
  <li class="folder">Primary
    <ul class="sub-folder hidden">
      <li>Secondary</li>
      <li>Secondary</li>
      <li>Secondary</li>
    </ul>
  </li>
  <li class="folder">Primary
    <ul class="sub-folder hidden">
      <li>Secondary</li>
      <li>Secondary</li>
      <li>Secondary</li>
    </ul>
  </li>
</ul>

CSS

.folder {
  cursor: pointer;
}

.hidden {
  display: none;
}

JavaScript

$('.folder').on('click', function(e) {
	var folder = $(this).find('.sub-folder');
  
  if (e.target !== this) return;
  
  if(folder.hasClass('hidden')) {
  	folder.removeClass('hidden');
  } else {
  	folder.addClass('hidden');
  }
});