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>
__________________
1 Attachment(s)
Re: Troubles with accordions in variants
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:
Re: Troubles with accordions in variants
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
Re: Troubles with accordions in variants
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.
Re: Troubles with accordions in variants
FYI: I tried a bootstrap version - no javascript. Same symptoms. Thanks for the help thus far.
Re: Troubles with accordions in variants
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.
Re: Troubles with accordions in variants
Thanks for the update. Keep us informed.
Re: Troubles with accordions in variants
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?
1 Attachment(s)
Re: Troubles with accordions in variants
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.
Re: Troubles with accordions in variants
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.