Troubles with accordions in variants

Hello:
I'm having a problem designing a faq page. I want to use an accordion style list of faq's and responses. No secret, the code is from W3Schools which I want to customize later. It works fine, but not when I try to use it in 4 variants. It'll work in 2 out of 4! Variant widths are 1200px, 960px, 480px, and 320px. All I did was copy the placeholder from the 1st variant to the rest and adjust the width accordingly. The questions (FAQ's) will display, but when I click on one of them, the accordion does not open to show the answer. I'll provide the code below. Any insights would be appreciated. Thanks.

___________________
CSS:
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
</style>

___________________
HTML:
<button class="accordion">Section 1</button>
<div class="panel">
<p>Response 1...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
<p>Response 2...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
<p>Response 3...</p>
</div>

___________________
javascript:
<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.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
__________________

Hi STS, I can only confirm your findings. The accordion works on a 1200px wide variant as well as the 480px variant but not the 960px & 300px variants.

Hopefully Acorn or Siran can expand on this. If not, contact support.

Here's my attempt:

It is a mixture of possible errors.

Button tags outside of a form tag wrapper.

JavaScript embedded into a Placeholder on each Variant where only one is need for the combined set.
The JavaScript unable to count through all the instances of the class accordion.
JavaScript in the Head and the Body.

Acorn

Cheers Acorn, I just copied the code from the W3Schools 'Try This' page, with the code in the same head/body section as theirs. So I'm still confused why it doesn't function an all variants.

FYI: I tried a bootstrap version - no javascript. Same symptoms. Thanks for the help thus far.

I've tried a couple of other versions of accordion-style utilities. They all exhibit the same kind of behavior once they're copied to variants. Some variants work, some don't. Very odd. I've submitted a support ticket to Magix. If I learn any more, I'll update this thread.

Thanks for the update. Keep us informed.

Here's the response I received from Support:
"If you want to use external code within variants you would need to use an Iframe code. Please check the site you want to implement from if they as well offer Iframe code."

I'll try to put the code inside an iframe, but I'm not optimistic that the problem will be solved. Any thoughts?

As I suspected, the iframe suggestion did not make a difference. I asked Support to keep working on it.

FYI, I was just looking at Magix / Xara support pages. I searched for "external code" and was presented with a page of suggested help topics and answers. This page is a prime opportunity for an accordion style question and answer format. Instead, what is there is a list of links to additional pages with the first few words of the answer below the link. So, if they can't do it, neither can I?
Attachment 120857
After seeing that, I'll likely adopt a similar format for the page I'm trying to design, rather than keep banging my head against the wall.

Thanks for the help Egg Bramhill and Acorn. I appreciate your efforts.

I have used popup layers to accomplish something similar to an accordion. A bit of a work load to get set up at first but if the answers don't change often it is workable. Just an idea.

Great minds think alike bkjohns! I'm working on that idea as we speak. Thanks.

Problem solved, thanks to Support. I had entered the css into every variant header, and the javascript into every variant body. Support said to place the css into the website properties head and remove it from all variants. Also, remove the javascript code from all variants and place it in the website properties body. It now works in all variants. Thanks for the help Acorn, Egg Bramhill, and bkjohns.

Thanks for the update ;)

Nice to see Support are only 3 weeks behind TalkGraphics.

Acorn