JSFiddle - React, Tailwind, and code Playground

by Oleh Aloshkin

HTML

<ul class='static'>
  <li>
    <span>lorem</span>
    <ul class='dropdown'>
      <li><span>1</span></li>
      <li><span>2</span></li>
      <li><span>3</span></li>
      <li><span>4</span></li>
    </ul>
  </li>  
  <li><span>lorem</span></li>
  <li><span>lorem</span></li>
  <li><span>lorem</span></li>
  <li><span>lorem</span></li>
</ul>

SCSS

* {
  padding: 0;
  margin: 0;
}

ul {
  min-width: 100px;
  list-style-type: none;
  li {
    background: #333;
    height: 30px;
    color: #FFF;
    cursor: pointer;
  }
  &.dropdown {
    display: none;
    transition: 2s;
    background: #444;
  }
}

JavaScript

var a = document.querySelectorAll('.static > li');
var counterA = 0;

while (counterA < a.length) {
	a[counterA].addEventListener('click', function(){
 		if (this.classList.contains('open')) {
    	this.childNodes[3].style.display = 'none';
      this.style.height = this.clientHeight - this.childNodes[3].clientHeight + 'px';
    	this.classList.remove('open');
    } else {
    	this.childNodes[3].style.display = 'block';
    	this.style.height = this.clientHeight + this.childNodes[3].clientHeight + 'px';
    	this.classList.add('open');
    }
  });
  counterA++;
}