How To Create Tree view with JavaScript

Learn to create tree view with html,css and javascript.

HTML

<ul>Music Instrument
  <li class="open">Piano
    <ul class="sub-item">
      <li>Grand Piano</li>
      <li>Upright Piano</li>
      <li class="open">Digital Piano
        <ul class="sub-item">
          <li>Digital Piano</li>
          <li>Stage Piano</li>
          <li>MIDI Controller</li>
          <li class="open">Keyboard
            <ul class="sub-item">
              <li>Weighted Keyboard</li>
              <li>Semi Weighted Keyboard</li>
              <li>Unweighted Keyboard</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Studio Piano</li>
    </ul>
  </li>
  <li class="open">String
    <ul class="sub-item">
      <li class="open">Guitar
        <ul class="sub-item">
          <li>Acoustic</li>
          <li>Electric</li>
          <li>Bass</li>
          <li>Classical</li>
        </ul>
      </li>
      <li>Ukulele</li>
      <li>Banjo</li>
      <li>Mandolin</li>
      <li class="open">Violin
        <ul class="sub-item">
          <li>Baroque</li>
          <li>Electric</li>
          <li>Stroh</li>
          <li>Semi Acoustic</li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="open">Mouth Organ
    <ul class="sub-item">
      <li class="open">Harmonica
        <ul class="sub-item">
          <li>Diatonic</li>
          <li>Chromatic</li>
          <li>Tremolo</li>
         </ul>
       </li>
       <li class="open">Melodicas
         <ul class="sub-item">
           <li>Soprano</li>
           <li>Tenor</li>
           <li>Bass</li>
           <li>Accordina</li>
         </ul>
       </li>
     </ul>
  </li>
</ul>

CSS

body {
    padding: 0;
    margin: 0;
    font-size: 22px;
}

ul {
    list-style-type: none;
}

.open {
    cursor: pointer;
}

.open::before {
    content: "\27A1";
}

.close:before {
    content: "\2B07";
}

.sub-item {
    display: none;
}

.sub-item-open {
    display: block;
}

JS

let open = document.querySelectorAll(".open");

open.forEach(element => {
    element.addEventListener('click', (e) => {
        e.stopPropagation();
        element.classList.toggle("close");
        element.firstElementChild.classList.toggle("sub-item-open");

    })
});