JSFiddle - React, Tailwind, and code Playground

by Jason Davis

HTML

<ul id="tag-menu">
  <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="JavaScript">JavaScript</a>
    <ul>
      <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="ElementJS">ElementJS</a>
        <ul>
          <li><a href="#"><span class="sub-folder"></span> Marketing</a>
          </li>
        </ul>
      </li>
      <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="jQuery">jQuery</a>
        <ul>
          <li><a href="#"><span class="sub-folder"></span> WebDev</a>
          </li>
        </ul>
      </li>
      <li><a href="#"><span class="sub-folder"></span> NodeJS</a>
      </li>
      <li><a href="#"><span class="sub-folder"></span> Templates</a>
      </li>
    </ul>
  </li>
  <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="PHP">PHP</a>
    <ul class="open">
      <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="ElementJS">ElementJS</a>
        <ul class="">
          <li><a href="#"><span class="sub-folder"></span> Marketing</a>
          </li>
        </ul>
      </li>
      <li><a href="#"><span class="sub-folder"></span> Marketing</a>
      </li>
    </ul>
  </li>
</ul>

CSS

.parent-tag-menu ul.open {
  display: block;
}

.parent-tag-menu ul {
  display: none;
  list-style: none;
}

body {
  background: #F9F9F9;
}

.sub-folder {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAALVBMVEUAAABQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFD0f7CQAAAAD3RSTlMAAQQcMDg5QKLH1drc4uQQ2+tZAAAALklEQVQIW2NggADvu4tB1EEGTRC1gYHj7t3nQAoIZCEUL3bqIERJzG4gOAY1CwBdyA687joC0wAAAABJRU5ErkJggg==");
  width: 12px;
  height: 11px;
  display: inline-block;
  margin-right: 10px;
}

a {
  color: #333;
  font: 14px "Open Sans", Helvetica, Arial, sans-serif;
  text-decoration: none;
}

#tag-menu,
#tag-menu ul {
  list-style: none;
}

.tag-menu-arrow {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("//cdn.devdocs.io/assets/icons-fcb32b5ce6fb6ec8c8a77052b3172a08e32b3a7c500dae979f07d6019c50d661.png");
  background-size: 4rem 6rem;
  text-indent: -1200px;
  position: relative;
  /*top: 12px;
left: 30px;*/
  background-position: 0px -129px;
  cursor: pointer;
  display: inline-block;
}

.tag-menu-arrow.open {
  transform: rotate(90deg);
}

JavaScript

$(document).ready(function() {

  $('.parent-tag-menu').on('click', '.tag-menu-arrow', function(e) {

    e.stopPropagation();
    $(this).toggleClass('open');
    $(this).next().next().toggleClass('open');

  });


});