title: sidebar multi level animated dropdown menu in vanilla js
body: <p><strong>For Bounty</strong></p>
  <p>I search it on google to find library something like but I did not find... if anyone knows you can give as an answer  (only vanilla js library &amp; MIT license )...</p>
  <p>Otherwise do not change html structure... fixing  my code it will be  better for me.. otherwise you can resolve your own way ..</p>
  <p><strong>End Bounty</strong></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>const dataKeys = document.querySelectorAll('nav ul')
  dataKeys.forEach(function(el,key){
      el.setAttribute('data-key',key);
  })
  
  
  const lists = document.querySelectorAll('ul ul')
  lists.forEach(function(el){
      let sh = el.scrollHeight;
      el.setAttribute('data-sh',sh);
      el.classList.add('sub-menu')
      el.style.maxHeight =  0 + "px"; 
  })
  document.querySelectorAll("ul li").forEach(el =&gt; el.addEventListener('click', function(e){
      e.preventDefault();
      e.stopPropagation();
      try {
        let el = e.target.parentElement.children[1]; 
        let ul = e.target.parentElement.closest('ul');
        if(ul){
          ul.querySelectorAll('ul').forEach(function(item){
            item.style.minHeight = 0 + 'px';
          })
        }
        if(parseInt(getComputedStyle(el).minHeight) &gt; 0){
          el.style.minHeight = 0 + "px";
        }else{
          el.style.minHeight =  el.scrollHeight + "px";
        }
      } catch (error) {
        return false;
      }
       return false;
  }));
  
  
  
    document.querySelectorAll("ul ul li").forEach(el =&gt; el.addEventListener('click', function(e){
  
      e.preventDefault();
      e.stopPropagation();
  
      // const lists = document.querySelectorAll('ul ul')
      // lists.forEach(function(el){
        
      //     el.style.minHeight =  0 + "px"; 
      // })
  
      let el = null;
      let sh = 0;
  
       if(e.target.parentElement.hasChildNodes()){
        let ul = e.target.parentElement.querySelector('ul');
        if(e.target.parentElement.contains(ul)){
          el = e.target.parentElement.children[1];
          console.log(e.target.parentElement);
          console.log(e.target.parentElement.children[1]);
          sh  = el.scrollHeight;
        }
      }
        
      
        let elKey = parseInt(el.getAttribute('data-key'));
  
        let elli = e.target.parentElement.parentElement;
  
        let elH =  parseInt(el.getAttribute('data-sh'));
        let elliH =  parseInt(elli.getAttribute('data-sh'));
  
        // elli.style.minHeight = 0 + 'px';
        
        let elFirstChild = 0;
        if(el.hasChildNodes()){
          elFirstChild = el.children[0].scrollHeight;
          elFirstChild = parseInt(elFirstChild);
        }
      
        elli.style.minHeight = elliH + elFirstChild - elH + 'px';
        el.style.minHeight = elH + 'px';
  
       return false;
    }));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
      display: inline-block;
      width: 100%;
      height: 100%;
      padding: 5px 10px;
  
      color: white;
  }
  
  nav ul,
  nav ul ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
  }
  
  nav ul {
      width: 200px;
      background: dodgerblue;
      position: relative;
  }
  
  
  nav ul ul {
  
      background: rgb(13, 130, 141);
      margin-left: 15px;
      border-left: 1px dashed white;
      transition: min-height .5s ease-in-out;
  
  }
  
  nav ul ul ul {
      background: rgb(1, 8, 8);
      margin-left: 15px;
      border-left: 1px dashed white;
  
  }
  
  nav ul ul ul ul {
      background: rgb(10, 41, 179);
      margin-left: 15px;
      border-left: 1px dashed white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Dropdown 1 &lt;/a&gt;
                  &lt;ul class="label-one"&gt;
                      &lt;li&gt;&lt;a href="javascript:void(0)"&gt; Menu 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Menu 2&lt;/a&gt;
                          &lt;ul class="label-two"&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 3&lt;/a&gt; &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Menu 3&lt;/a&gt;
                          &lt;ul class="label-two"&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 3&lt;/a&gt; &lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 3&lt;/a&gt; &lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 3&lt;/a&gt; &lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 3&lt;/a&gt; &lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 3&lt;/a&gt; &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Menu 4&lt;/a&gt;
                          &lt;ul class="label-two"&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 2&lt;/a&gt;&lt;/li&gt;
                              &lt;!-- &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 1 Sub Menu 3&lt;/a&gt; &lt;/li&gt; --&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Dropdown 2 &lt;/a&gt;
                  &lt;ul class="label-one" &gt;
                      &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Menu 2 &lt;/a&gt;
                          &lt;ul &gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 2 Sub Menu 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt; 2 Sub Menu 2&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>