JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<div>
<ul class="menu">
  <li>item 1
    <ul>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
    </ul>
  </li>
  <li>item 3
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
    </ul>
  </li>
  <li>item 4
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
    </ul>
  </li>
  <li>item 5
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 10</li>
    </ul>
  </li>
  <li>item 6
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
    </ul>
  </li>
  <li>item 7
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
    </ul>
  </li>
  <li>item 8
    <ul>
      <li>item 1</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
    </ul>
  </li>
  <li>item 9
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 10</li>
    </ul>
  </li>
  <li>item 10
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item...

CSS

ul { margin: 0; padding: 0; list-style: none; }
li { font-weight: bold; cursor: pointer; }
ul ul { padding-left: 20px; }
li li { font-weight: normal; }
li ul { display: none; }
li.active ul { display: block; }
div {
  position: fixed;
  left: 0;
  top: 42px;
  right: 0;
  bottom: 0;
  border: 1px solid silver;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

JavaScript

let div = document.querySelector('div');
document.querySelectorAll('.menu > li').forEach(function (li){
  li.onclick = function (){
  	if (this.classList.contains('active')) {
    	this.classList.remove('active');
    } else {
    	[].forEach.call(this.parentElement.children, function(e){
      	e.classList.remove('active');
      });
      this.classList.add('active');
      let top = this.offsetTop;
      div.scrollTop = top - 20;
    }
  };
});