Solved

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

quiztrail
Explorer
59 0 17

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-s...

 

 

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

 

Thank you in advance.

Becky

Accepted Solution (1)

gr_trading
Shopify Partner
1807 143 189

This is an accepted solution.

@quiztrail 

 

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

 

hari1_prasad_0-1683647734475.png

 

hari1_prasad_1-1683647734437.png

 

hari1_prasad_2-1683647733705.png

 

 

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

 

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee

View solution in original post

Replies 3 (3)

Ujjaval
Shopify Partner
1242 197 210

@quiztrail add below code into theme.liquid file before closing </body> Tag

<script>
var jq = document.createElement('script');
jq.src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

jQuery('div#section1').click(function(){

    jQuery(this).next().slideToggle();
})

jQuery('div#section2').click(function(){

    jQuery(this).next().slideToggle();
})

jQuery('div#section3').click(function(){

    jQuery(this).next().slideToggle();
})
</script>

it will be working.

gr_trading
Shopify Partner
1807 143 189

This is an accepted solution.

@quiztrail 

 

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

 

hari1_prasad_0-1683647734475.png

 

hari1_prasad_1-1683647734437.png

 

hari1_prasad_2-1683647733705.png

 

 

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

 

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee

made4Uo
Shopify Partner
3833 716 1166

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free