Foundation jQuery accordion rendering as open on page load

Question

I am using a jQuery accordion with Foundation on my webpage.

When i visit the page for the first time, the accordion renders as closed like it should.

But, if I open the accordion, leave the page, then go back to the page, there is a split second where the page loads and you can see the accordion is open and then the jQuery kicks in and you can see it close.

This is very frustrating and I have not been able to find any good reasons or examples of why this is happening.

Im using Rails 4, and I do no know if this is an issue with turbolinks, my jQuery accordion function, or with how its rendering cached webpages.

The jQuery function I'm using for the accordion is:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}

Can anyone give some help on solving this issue?

Answer 1

This might be due to page caching, or classes set to the wrong defaults.

Make sure in the css / html file the elemnents aren't active, this way when the page is loaded they'll be closed already.

If it's a caching issue you can write a function to be executed like:

window.onbeforeunload = function() {
    var i = acc.length;
    while (i--) acc[i].classList.toggle("closed") // I don't know the class for closed, I'm guessing.
}