title: Bootstrap collapsible not working after first time
body: <p>I am making a website using PERSONA as the CMS and am including collapsible elements on the page through Bootstrap. I've included Bootstrap Version 3.3.7 and PERSONA comes with an internal version of Jquery. You can view the website here: 
  <a href="https://agdraft3.persona.co/" rel="nofollow noreferrer">https://agdraft3.persona.co/</a></p>
  
  <p>The collapsible part works properly the first time or after a refresh but when I click a link inside of the collapsed elements and then go back, it freezes until I refresh. The only error thrown is one related to the inclusion of a vimeo embed and searching hasn't brought up any results. </p>
  
  <p>Here's my code: </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>  
    $(document).ready(function(){
       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>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    button.accordion {
          background-color: rgba(255, 255, 255, 0);
          color: #444;
          cursor: pointer;
          width: 100%;
          border: none;
          text-align: left;
          outline: none;
          font-size: 15px;
          transition: 0.4s;
      }
      
      button.accordion.active, button.accordion:hover {
          background-color: #ffffff;
      }
      
      div.panel {
          padding: 0 18px;
          background-color: white;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.2s ease-out;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>HTML
  
      &lt;button class="accordion active"&gt;
       &lt;h2 class="collapse"&gt;Current&lt;/h2&gt;&lt;/button&gt;
        &lt;div class="panel"&gt;
         &lt;div class="indent"&gt;
          &lt;h2 class="current"&gt;
            &lt;a href="Weird-Seeds" rel="history"&gt;Weird Seeds&lt;/a&gt;
          &lt;/h2&gt;
          &lt;h2&gt;(2017)&lt;/h2&gt;
          &lt;small&gt;Weird Seeds is a community of artists &amp;amp; scholars who tell stories about ecology, memory, and power.&lt;/small&gt;=
       &lt;/div&gt;
      &lt;/div&gt;
  
  
  
   </code></pre>
  </div>
  </div>
  </p>