title: HTML two-level accordion menu hiding and not adding content
body: <p>I'm trying to do a two level accordion menu. The first level works fine but when I add the second level, the second level content hiddes in the first level Section 2 title. Someone knows how can I solve this?</p>
  <p>My html code is this :</p>
  <pre><code>&lt;div class=&quot;container-wrapper&quot;&gt;&lt;/div&gt;
      &lt;button class=&quot;accordion&quot;&gt;&lt;p class=&quot;title-sections&quot;&gt;Provisioning&lt;/p&gt;&lt;/button&gt;
      &lt;div class=&quot;panel&quot;&gt;
          &lt;button class=&quot;sub-accordion&quot;&gt;Set Variables&lt;/button&gt;
          &lt;div class=&quot;sub-panel&quot;&gt;
              &lt;p&gt;Lorem ipsum...&lt;/p&gt;
          &lt;/div&gt;
          &lt;button class=&quot;sub-accordion&quot;&gt;Get Variables&lt;/button&gt;
          &lt;div class=&quot;sub-panel&quot;&gt;
              &lt;p&gt;Lorem ipsum...&lt;/p&gt;
           &lt;/div&gt;
           &lt;button class=&quot;sub-accordion&quot;&gt;Reset&lt;/button&gt;
           &lt;div class=&quot;sub-panel&quot;&gt;
               &lt;p&gt;Lorem ipsum...&lt;/p&gt;
           &lt;/div&gt;
           &lt;button class=&quot;sub-accordion&quot;&gt;Get Base Report&lt;/button&gt;
           &lt;div class=&quot;sub-panel&quot;&gt;
               &lt;p&gt;Lorem ipsum...&lt;/p&gt;
           &lt;/div&gt;
           &lt;/div&gt;
      
       &lt;button class=&quot;accordion&quot;&gt;&lt;p class=&quot;title-sections&quot;&gt;Availability&lt;/p&gt;&lt;/button&gt;
       &lt;div class=&quot;panel&quot;&gt;
           &lt;p&gt;Lorem ipsum...&lt;/p&gt;
       &lt;/div&gt;
  </code></pre>
  <p>My CSS :</p>
  <pre><code>.accordion {
          background-color: #eee;
          color: #444;
          cursor: pointer;
          padding: 18px;
          width: 100%;
          text-align: left;
          border: none;
          outline: none;
          transition: 0.4s;
      }
  
      .sub-accordion {
          background-color: rgb(181, 255, 191);
          color: #444;
          cursor: pointer;
          padding: 18px;
          width: 100%;
          text-align: center;
          border: none;
          outline: none;
          transition: 0.4s;
      }
  
      .active, .accordion:hover {
         background-color: #ccc;
      }
  
      .sub-active, .sub-accordion:hover {
          background-color: rgb(104, 255, 124);;
      }
  
      .panel {
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
      }
  
      .sub-panel {
          padding: 0 18px;
          background-color: lightblue;
          max-height: 0;
          overflow: hidden;
          transform: max-height 0.2s ease-out;
      }
  
      .container-wrapper {
          padding: 20pt;
      }
  
      .title-sections {
          font-size: 20px;
      }
  </code></pre>
  <p>And finally my JS, here is the problem. I copy pasted the same code of the first level accordion to make the second level accordion and there's a problem with the height but I don't quite know which part needs to be changed :</p>
  <pre><code>var acc = document.getElementsByClassName(&quot;accordion&quot;);
  var i;
  var sub_acc = document.getElementsByClassName(&quot;sub-accordion&quot;);
  var j;
  
  
  for (i = 0; i &lt; acc.length; i++) {
    acc[i].addEventListener(&quot;click&quot;, function() {
      this.classList.toggle(&quot;active&quot;);
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + &quot;px&quot;;
      }
    });
  }
  
  for (j = 0; j &lt; sub_acc.length; j++) {
    sub_acc[j].addEventListener(&quot;click&quot;, function() {
      this.classList.toggle(&quot;sub-active&quot;);
      var sub_panel = this.nextElementSibling;
      if (sub_panel.style.maxHeight) {
        sub_panel.style.maxHeight = null;
      } else {
        sub_panel.style.maxHeight = sub_panel.scrollHeight + &quot;px&quot;;
      }
    });
  }
  </code></pre>