title: Tree view (pure HTML/CSS/JS) problem in js
body: <p>I have a question about Tree view in pure HTML/CSS/JS files.
  I can make Tree view with HTML/CSS successfully and get help from w3school, you can see my code here:
  html file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var toggler = document.getElementsByClassName("caret");
  var i;
  
  for (i = 0; i &lt; toggler.length; i++) {
    toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
   })
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul, .menu {
   list-style-type: none;
  }
  .menu {
    margin: 0;
    padding: 0;
  }
  .menu a {
    text-decoration: none;
  }
  .caret {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
  }
  .caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
  }
  .caret-down::before {
    transform: rotate(90deg);
  }
  .nested {
    display: none;
  }
   .active {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class="caret"&gt;
    &lt;a href="javascript:void(0);"&gt;&lt;i class="fa fa-graduation-cap"&gt;&lt;/i&gt; Tutorial&lt;/a&gt;
    &lt;ul class="nested"&gt;
      &lt;li class="caret"&gt;
        &lt;a href="javascript:void(0);"&gt;&lt;i class="fa fa-chrome"&gt;&lt;/i&gt; Web Development&lt;/a&gt;
        &lt;ul class="nested"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Blog Project&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;CMS Project&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop Project&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;E-learning Project&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Automasion Project&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="caret"&gt;
        &lt;a href="javascript:void(0);"&gt;&lt;i class="fa fa-server"&gt;&lt;/i&gt; Network&lt;/a&gt;
        &lt;ul class="nested"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Comptia&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Windows&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Linux&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;CISCO&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;MicroTik&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Virtualization&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Security&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="caret"&gt;
        &lt;a href="javascript:void(0);"&gt;&lt;i class="fa fa-microchip"&gt;&lt;/i&gt; IOT&lt;/a&gt;
        &lt;ul class="nested"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Concept&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Electronic&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sensor&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-archive"&gt;&lt;/i&gt; Projects&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-info-circle"&gt;&lt;/i&gt; Resume&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-envelope-open"&gt;&lt;/i&gt; Contact me&lt;/a&gt;&lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I have a problem in cascading (Open/close) them in js file, first time that I click on tutorials, that list will open without any problems, but after that when I click on one of the nested lists in it (web development) all of the tree from tutorials is closing.</p>