Why isn't the FAQ accordion effect working on my page?

Store Design
1

Hi all,

I have followed the below tutorial - but the drop down accordion effect isn’t working. Can someone help please?

https://www.envision.io/blogs/ecommerce-pulse/28832705-how-to-add-an-faq-accordion-to-your-shopify-store

This is my page - https://www.quiztrail.co.uk/pages/faqs

Thank you in advance.

Becky

2

@quiztrail add below code into theme.liquid file before closing Tag

it will be working.

3

@quiztrail

You should give a try the collapsible content from the customizer.

hari1_prasad_0-1683647734475.png
hari1_prasad_0-1683647734475.png999×562 447 KB

hari1_prasad_1-1683647734437.png
hari1_prasad_1-1683647734437.png999×562 113 KB

hari1_prasad_2-1683647733705.png
hari1_prasad_2-1683647733705.png999×562 157 KB

If you still do not like it, we can code your FAQ page, according to your requirement.

4

Hi @quiztrail ,

Do not use display: none and use opacity: 0 instead to show some animations. Also, you do not need to target the content using the javascript since you already have active class attribute added. The javascript becomes unnecessary. I would suggest to target the content using CSS instead. Less javascript, the better