title: Click Events with Treeview in Javascript
body: <p>I am making a basic online editing outline for coursework. I want to include a tree-view functionality, that expands and collapses the parent node with one click. However, I can seem to get it to work.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Editor&lt;/title&gt;
    &lt;style&gt;
        .caret {
        cursor: pointer;
        user-select: none;
        }
  
        .active {
        display: block;
        }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="inputArea"&gt;
          &lt;div id="bulletPoints" contenteditable="true"&gt;&lt;/div&gt;
              &lt;ul class="newUl"&gt;
                  "header"
                   &lt;li class="newLI"&gt;textContent&lt;/li&gt;
                   &lt;ul&gt;
                       &lt;li class="newLi"&gt;okay&lt;/li&gt;
                       &lt;ul&gt;
                           &lt;li class="newLi"&gt;yes&lt;/li&gt;
                       &lt;/ul&gt;
                   &lt;li class="newLi"&gt;no&lt;/li&gt;
                   &lt;/ul&gt;
               &lt;/ul&gt;
       &lt;/div&gt;
  
  &lt;script&gt;
     let toggler = document.getElementsByClassName("newLi");
     let i;
  
  for (i = 0; i &lt; toggler.length; i++) {
    toggler[i].addEventListener("click", function() {
      this.parentElement.querySelector(".newUl").classList.toggle("active");
      this.classList.toggle("newLi-down");
    });
  }
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>