Javascript to open/close accordion not working within PHP-rendered text

[ad_1]

Hi everyone, let me preface this by saying I’m sorry for what is probably a novice question. I am a graphic designer primarily and not a programmer or web developer, although I can muddle through some things.

My boss requested some changes to our website including sections with accordions and she likes the style where the accordion content is hidden; you click on the title and it expands to show the content. I tried using the base system from the W3schools accordion system because it seemed easy to implement.

I added the custom CSS to make the accordion look as intended, but the trouble is the javascript used to open/close the accordion doesn’t work on text rendered through PHP. My apologies if I’m using the wrong terms here.

Basically, if I put this accordion code in non-php sections of the template, it works fine. But it doesn’t work when it’s put in a text block in WordPress:

<div class=”accordion”>Accordion title</div>
<div class=”panel”>
<p>The expanded copy would go here…</p>
</div>

This is the javascript used to open/close the accordion:

<script>
var acc = document.getElementsByClassName(“accordion”);
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener(“click”, function() {
this.classList.toggle(“active”);
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + “px”;
}
});
}
</script>

I have googled this and tried to figure it out, and I know there are differences between javascript being browser-executed and php being server-executed but what am I missing here on making these two systems cooperate?

any help would be super appreciated. I’m still googling to try to figure this out on my own but i think I may be searching for the wrong thing.

[ad_2]