Accordion effect on my markdown block 'bounces' and I don't know why

Site URL: https://www.shutupanddance.co/faq

Hello,

I have a markdown block on my FAQ page. When I tap the headings, the accordion 'bounces' open, closed, open – you can see what's happening here.

Here's a page where it is functioning fine (the accordion 'bounces' open until you close it again by tapping the header).

The coding for both markdown blocks is the same – I copy pasted the detail – so can't figure out what I'm doing wrong!

Any help would be appreciated, thank you.

Abby

2 hours ago, abbydamen said:

Site URL: https://www.shutupanddance.co/faq

Hello,

I have a markdown block on my FAQ page. When I tap the headings, the accordion 'bounces' open, closed, open – you can see what's happening here.

Here's a page where it is functioning fine (the accordion 'bounces' open until you close it again by tapping the header).

The coding for both markdown blocks is the same – I copy pasted the detail – so can't figure out what I'm doing wrong!

Any help would be appreciated, thank you.

Abby

You should only append the script only one time, I suggest place it on Code injection Footer

<script>
 $(document).ready(function(){

 $('.markdown-block .sqs-block-content h3').css('cursor','pointer');

 $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();

 $(".markdown-block .sqs-block-content h3").click(function()
{$(this).nextUntil("h3").slideToggle();});
 });
 </script>

Hiya! Thanks for your support here. 

I've tried putting the script in the footer only (via settings/advanced), but that makes both pages (/location and /faq) do the weird bounce effect...

I've tried putting the code in the advanced / header section of each page setting, but that ends up making the markdown not function at all (e.g. all text shows on /locations) and then still same bounce issue persists on /faq.

If this helps anyone else, I found injecting this code (on both pages (probably not best practice as you suggest @bangank36 !) in a code block has resolved my issue.

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
 $(document).ready(function(){

 $('.markdown-block .sqs-block-content h3').css('cursor','pointer');

 $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();

 $(".markdown-block .sqs-block-content h3").click(function()
{$(this).nextUntil("h3").slideToggle();});
 });
 </script>

Thanks again

Abby