title: Make one panel close when another is opened
body: <p>I would like to make it for if one of these panels is open, it'll close when you've clicked on another panel. <em>I looked at some other questions similar to mine but it seems they all uses a different method for the panels.</em></p>
  
  <p>Heres a Fiddle of it: <a href="https://jsfiddle.net/3q87y2u8/" rel="nofollow noreferrer">https://jsfiddle.net/3q87y2u8/</a></p>
  
  <p>Heres the JS:</p>
  
  <pre><code>    var acc = document.getElementsByClassName("accordion");
      var i;
  
          for (i = 0; i &lt; acc.length; i++) {
              acc[i].onclick = function() {
              this.classList.toggle("active");
              var panel = this.nextElementSibling;
              if (panel.style.maxHeight){
              panel.style.maxHeight = null;
      } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      } 
     }
  }
  </code></pre>
  
  <p>I'd also like to get the '+' to change color when hovered over. Kinda like the text currently does. I cant seem to call it out right in the CSS though. </p>
  
  <p>Thank You!</p>