JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<li>
  <a href="/Users/robin/Development/gitlab/amu-pocs/workspace/workspace">workspace</a>
  <button>workspace Pages</button>
  <ul>

    <li>
      <a href="/Users/robin/Development/gitlab/amu-pocs/workspace/workspace/styles">styles</a>
      <button>styles Pages</button>
      <ul>
        <li>buttons</li>
        <li>colours</li>

        <li>
          <a href="/Users/robin/Development/gitlab/amu-pocs/workspace/workspace/styles/nested">nested</a>
          <button>nested Pages</button>
          <ul>
            <li>egg</li>
          </ul>
        </li>

      </ul>
    </li>

  </ul>
</li>

CSS

ul {
  max-height: 500vh;
  overflow: show;
  transition: max-height 0.6s, background-color 0.6s, transform 2s;
}
ul.closed {
  background-color: pink;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.6s, background-color 0.6s, transform 2s;
}

JavaScript

const buttons = [...document.querySelectorAll('button')];

const handleClick = (e) => {
console.log(e);
	e.target.parentElement.querySelector('ul').classList.toggle('closed');
}

buttons.map((button) => {
	button.addEventListener('click', handleClick);
});