I am currently developing a website using PERSONA as the CMS and have implemented collapsible elements on the page using Bootstrap. The website is using Bootstrap Version 3.3.7 and PERSONA includes an internal version of jQuery. For reference, you can access the website at the following link:
The collapsible feature works correctly upon initial load or after refreshing the page. However, I am encountering an issue where if I click a link within the collapsed elements and then navigate back, the page freezes until I manually refresh it. The only error message I receive is related to a Vimeo embed included on the page, and my searches for a solution have been unsuccessful.
Below is the code snippet that I am using:
$(document).ready(function(){
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < 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";
}
}
}
}); 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;
}HTML
<button class="accordion active">
<h2 class="collapse">Current</h2></button>
<div class="panel">
<div class="indent">
<h2 class="current">
<a href="Weird-Seeds" rel="history">Weird Seeds</a>
</h2>
<h2>(2017)</h2>
<small>Weird Seeds is a community of artists & scholars who tell stories about ecology, memory, and power.</small>=
</div>
</div>