JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<ul>
  <li class="expandable">
    some content
    <ul>
      <li>sub a</li>
      <li>sub b</li>
    </ul>
  </li>
</ul>

CSS

ul { list-style-type: none; }
.expandable ul { display: none; }
/* HOVER EFFECT */
.expandable:hover {
  cursor: pointer;
}
.expandable:before {
    display: inline-block;
    content: "â–¶";
    margin-right: 4px;
    font-size: 0.6em;
    transition: transform 0.1s linear;
}

.expandable.expanded:before {
  transform: rotate(90deg);
}
.expandable.expanded:before:hover {
  animation: wiggle 0.1s;
}

.expandable:hover:before {
	animation: move 0.2s;
  animation-iteration-count: 2;
  animation-timing-function: ease-out;
}

/* safari and chrome */
@-webkit-keyframes wiggle {
	0% {-webkit-transform:rotate(0deg);}
	50% {-webkit-transform:rotate(-8deg);}
	100% {-webkit-transform:rotate(0deg);}
}

@keyframes wiggle {
	0% {transform:rotate(0deg);}
	50% {transform:rotate(-8deg);}
	100% {transform:rotate(0deg);}
}

/* safari and chrome */
@-webkit-keyframes move {
  0% {-webkit-transform:translateX(0px);}
  50% {-webkit-transform:translateX(2px);}
  100% {-webkit-transform:translateX(0px);}
}

@keyframes move {
  0% {transform:translateX(0px);}
  50% {transform:translateX(2px);}
  100% {transform:translateX(0px);}
}

JavaScript

// JS for the list
var rootUl = document.getElementsByTagName('ul')[0];

rootUl.addEventListener('click', function(event) {
  var li = event.target;

  var nestedUl = li.getElementsByTagName('ul')[0];

  if (!nestedUl) { return; }

  if (li.classList.contains('expanded')) {
    nestedUl.style.display = 'none';
    li.classList.remove('expanded');

  } else if (event.target.classList.contains('expandable')) {
    nestedUl.style.display = 'block';
    li.classList.add('expanded');
  }
})