title: keep only one li node open in tree view display
body: <p>I want to hide other siblings li when i click one li to diplay tree view.
  Only one node should open and its children elements have to expand. check the fiddle links below .
      Html code :
      
        <li>Part 1
          <ul>
            <li>Item A
              <ul>
                <li>Sub-item 1</li>
                <li>Sub-item 2</li>
                <li>Sub-item 3</li>
              </ul>
            </li>
            <li>Item B
              <ul>
                <li>Sub-item 1</li>
                <li>Sub-item 2</li>
                <li>Sub-item 3</li>
              </ul>
            </li>
            <li>Item C
              <ul>
                <li>Sub-item 1</li>
                <li>Sub-item 2</li>
                <li>Sub-item 3</li>
              </ul>
            </li>
            <li>Item D
              <ul>
                <li>Sub-item 1</li>
                <li>Sub-item 2</li>
                <li>Sub-item 3</li>
              </ul>
            </li>
            <li>Item E
              <ul>
                <li>Sub-item 1</li>
                <li>Sub-item 2</li>
                <li>Sub-item 3</li>
              </ul>
            </li>
          </ul>
        </li></p>
  
  <pre><code>  &lt;li&gt;&lt;a href="#"&gt;Part 2&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item A&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item B&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item C&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item D&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item E&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&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;Part 3&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item A&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item B&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item C&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item D&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item E&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  css :
  ul.tree li {
      list-style-type: none;
      position: relative;
  }
  
  ul.tree li ul {
      display: none;
  }
  
  ul.tree li.open &gt; ul {
      display: block;
  }
  
  ul.tree li a {
      color: black;
      text-decoration: none;
  }
  
  ul.tree li a:before {
      height: 1em;
      padding:0 .1em;
      font-size: .8em;
      display: block;
      position: absolute;
      left: -1.3em;
      top: .2em;
  }
  
  ul.tree li &gt; a:not(:last-child):before {
      content: '+';
  }
  
  ul.tree li.open &gt; a:not(:last-child):before {
      content: '-';
  }
  
  js code :
  
  var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
  for(var i = 0; i &lt; tree.length; i++){
      tree[i].addEventListener('click', function(e) {
          var parent = e.target.parentElement;
          var classList = parent.classList;
          if(classList.contains("open")) {
              classList.remove('open');
              var opensubs = parent.querySelectorAll(':scope .open');
              for(var i = 0; i &lt; opensubs.length; i++){
                  opensubs[i].classList.remove('open');
              }
          } else {
              classList.add('open'); // Here only i want that condition to check li is already opened or not//
          }
      });
  }
  
  For more info : https://jsfiddle.net/te366hu2/2/
  </code></pre>