JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<h1>Not working</h1>

<p>wiggle effect not working on :before element</p>

<ul>
  <li class='expandable'>
    topic a
    <ul>
      <li>sub a</li>
      <li>sub b</li>
    </ul>
  </li>
  <li>topic b</li>
</ul>

<h1>Working</h1>
<p>Wiggle effect is working on this though (hover over it)</p>
<div class='wiggler'>wiggle</div>

CSS

ul { list-style-type: none; }

.expandable {
   margin-left: -17px;
   cursor: pointer;
 }

.expandable:before {
  display: inline-block;
  margin-right: 3px;
  content: 'â–¶';
  font-size: 0.6em;
  cursor: pointer;
}

.expandable.expanded:before {
  animation: transform 1s linear;
  transform: rotate(90deg);
}

.expandable ul {
  display: none;
}

.wiggler {
  display: inline-block;
  cursor: pointer;
  border: solid 1px red;
  padding: 1px;
}

/* HOVER EFFECT */
.expandable:hover:before, .wiggler:hover {
	animation: wiggle 0.1s;
  animation-iteration-count: 2;
  animation-timing-function: ease-out;
}

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

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

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');
  }
})