title: Collapsible Panel responsible to window scale
body: <p>I am trying to implement a responsive collapsible panel on my website. I saw that W3School have an example on the subject, however it was flawed. If you were to resize the window after pressing the button to expand/collapse, the panel wouldn't scale properly.</p>
  
  <p><strong>EDIT:</strong> Screenshots here:</p>
  
  <p><a href="https://i.stack.imgur.com/Qc3Du.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qc3Du.png" alt="Default view"></a></p>
  
  <p><a href="https://i.stack.imgur.com/1Cpw1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Cpw1.png" alt="Minimised view"></a></p>
  
  <p><a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol" rel="nofollow noreferrer">Here</a> is their example:</p>
  
  <p><strong>Code for collapsible</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>// Button Collapsible
  var coll = document.getElementsByClassName("collapsible");
  var i;
  
  for (i = 0; i &lt; coll.length; i++) {
      coll[i].addEventListener("click", function () {
          this.classList.toggle("active");
          var content = this.nextElementSibling;
          if (content.style.maxHeight) { content.style.maxHeight = null; }
          else {
              content.style.maxHeight = content.scrollHeight + "px";
          }
      });
  }
  </code></pre>
  
  <p><strong>CSS Code for affected panel</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.aboutCollapsible {
      font: 16px/24px "Roboto";
      background: #202020;
      text-align: justify;
      margin-bottom: 20px;
      width: 580px;
      max-width: 100%;
      padding: 1px 20px 5px 20px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease-out;
  }
  </code></pre>
  
  <p><strong>My question:</strong>
  How would you be able to keep the "animation" of when the panel smoothly scrolls opens and allow still allow the panel fully respond to a window scale. <em>I do not wish to use bootstrap or anything other than HTML, CSS and JavaScript</em></p>
  
  <p><strong>What I tried:</strong>
  I tried to modify the value from pixels to percent. However, that didn't allow the animation to fully work.</p>