title: keep button:active after click
body: <p>im new at this so this might be a stupid question but how do i keep a button :active after the click?</p>
  
  <p>i dont know if this changes the awnser but i have a sidebar with 5 buttons, 4 have functions to make one div appear and the others hide and the other button is an accordion.</p>
  
  <p>HTML</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-html lang-html prettyprint-override"><code>  &lt;content class="menu"&gt;
      &lt;button onclick="myFunction1();"&gt;Home&lt;/button&gt;
      &lt;br&gt;
      &lt;button onclick="myFunction2();"&gt;About&lt;/button&gt;
      &lt;br&gt;
      &lt;button class="accordion"&gt;Work&lt;/button&gt;
        &lt;content class="panel"&gt;
           &lt;button id="submenu" class="Work1" onclick="myFunction3();"&gt;Work1&lt;/button&gt;
        &lt;/content&gt;
      &lt;button onclick="myFunction4();"&gt;Contacts&lt;/button&gt;
    &lt;/content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>CSS</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-css lang-css prettyprint-override"><code>content.panel {
      display: none;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Java</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>      function myFunction1() {
          document.getElementById("Home").style.display = "block";
          document.getElementById("About").style.display = "none";
          document.getElementById("Work1").style.display = "none";
          document.getElementById("Contacts").style.display = "none";
      }
  
      function myFunction2() {
        document.getElementById("Home").style.display = "none";
        document.getElementById("About").style.display = "block";
        document.getElementById("Work1").style.display = "none";
        document.getElementById("Contacts").style.display = "none";
      }
  
      function myFunction3() {
        document.getElementById("Home").style.display = "none";
        document.getElementById("About").style.display = "none";
        document.getElementById("Work1").style.display = "block";
        document.getElementById("Contacts").style.display = "none";
      }
  
      function myFunction4() {
        document.getElementById("Home").style.display = "none"; 
        document.getElementById("About").style.display = "none";
        document.getElementById("Work1").style.display = "none";
        document.getElementById("Contacts").style.display = "block";
  }
  
  var acc = document.getElementsByClassName("accordion");
  var i;
  
  for (i = 0; i &lt; acc.length; i++) {
      acc[i].onclick = function(){
          /* Toggle between adding and removing the "active" class,
          to highlight the button that controls the panel */
          this.classList.toggle("active");
  
          /* Toggle between hiding and showing the active panel */
          var panel = this.nextElementSibling;
          if (panel.style.display === "block") {
              panel.style.display = "none";
          } else {
              panel.style.display = "block";
          }
      }
  }</code></pre>
  </div>
  </div>
  </p>