FAQ Accordions

New Member
1 0 1

Hello,

We have followed this tutorial: https://www.envision.io/blogs/ecommerce-pulse/28832705-how-to-add-an-faq-accordion-to-your-shopify-s...

However, the accordion aspect does not work. There are no + / - signs on our page.

Maybe the tutorial forgets to add the assets to the code?

We are using Debut theme.

Thankyou!

 

 

1 Like
New Member
3 0 0

Did you end up with a solution for this? I am having the same issue and use the same theme.

0 Likes
New Member
1 0 0

Hi everyone, 

I just spent HOURS looking for the solution and it looks like a lot of people either gave up or just didn't bother posting a solution. I figured it out in the end so I decided to sign up for an account on here (this is my first post) and share the joy! 

What I ended up doing was copying the contents from the "jquery_accordion.js" file and pasting it into the end of my "theme.js.liquid" file. It finally worked for me, so hopefully it will for you too! 

PS I'm using the Supply theme if that makes a difference :) 

0 Likes
New Member
1 0 1

Hello, I just found this on the tutorial page comments, I tried it in the Debut theme and it worked for me. I hope that helps:

 

Use the following code instead of step 3 code of this article and then use the code at the bottom for step 6 code on your shopify page:

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

button.accordion.active, button.accordion:hover {
background-color: #ccc;
}

button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

button.accordion.active:after {
content: "\2212";
}

div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<script>
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";

}
}
</script>

</body>
</html>

USE THIS CODE ON YOUR SHOPIFY FAQ PAGE:

<div class="accordion" id="section2"></div>
<div class="container">
<div class="content"></div>
</div>
<button class="accordion">Section 1</button>
<div class="panel">

Lorem ipsum...


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

Lorem ipsum...


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

Lorem ipsum...
</div>

1 Like
Shopify Partner
139 3 13

If anyone is looking for a quick copy/paste pure CSS accordion for Shopify's pages, I've got a blog post on it.

 

Here's the code snippet to copy/paste into the editor:

https://gist.github.com/seandogg/ed55076b8913235bda1aa79f34cffe90

 

3 Likes
New Member
1 0 0

Working for Debut Theme as of april 2019 ... Followed original isntructions from https://www.envision.io/blogs/ecommerce-pulse/28832705-how-to-add-an-faq-accordion-to-your-shopify-s... and replaced with the one below .. Thank youaccordion debut theme screencap.jpg


@Veronica_Encina wrote:

Hello, I just found this on the tutorial page comments, I tried it in the Debut theme and it worked for me. I hope that helps:

 

Use the following code instead of step 3 code of this article and then use the code at the bottom for step 6 code on your shopify page:

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

button.accordion.active, button.accordion:hover {
background-color: #ccc;
}

button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

button.accordion.active:after {
content: "\2212";
}

div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<script>
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";

}
}
</script>

</body>
</html>

USE THIS CODE ON YOUR SHOPIFY FAQ PAGE:

<div class="accordion" id="section2"></div>
<div class="container">
<div class="content"></div>
</div>
<button class="accordion">Section 1</button>
<div class="panel">

Lorem ipsum...


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

Lorem ipsum...


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

Lorem ipsum...
</div>


 

0 Likes
Highlighted
Tourist
15 0 3

This made it get closer to work. The only issue is that opening a question doesn't close other questions.

1 Like
Shopify Partner
139 3 13

Rocking if you dig into the <input> and change the type="checkbox" to type="radio" it should then open one and close another. 

0 Likes
Tourist
15 0 3

The code doesn't contain the tag <input>.

0 Likes
Shopify Partner
139 3 13
Ahh, sorry, thought you were using the snippet I posted earlier in the
thread.
0 Likes