Accordion coding not working

kbacon · April 24, 2021

Site URL: https://circle-wrasse-4735.squarespace.com/freesession

I haven't gone live yet, but I've added CSS to my site several times from several different code sources. It always looks ok, but the accordion never works (toggles). I know that you need updated javascript for it to work, but it doesn't even work looking on my phone.

Is this not worth the effort if there's a chance people viewing the site won't see the accordion, thus it looks really bad for half the viewers?
My client wanted the information for each membership to be on a separate page, but that seems excessive, so really wanting this to work consistently.

Currently used this article to help https://fallonmade.com/blog/accordion-dropdown-squarespace-css
but other's I've used have had the same problem of not toggling.

Password for site is: Bacon

Agha_Waqas · April 24, 2021

3 hours ago, kbacon said:

Site URL: https://circle-wrasse-4735.squarespace.com/freesession

I haven't gone live yet, but I've added CSS to my site several times from several different code sources. It always looks ok, but the accordion never works (toggles). I know that you need updated javascript for it to work, but it doesn't even work looking on my phone.

Is this not worth the effort if there's a chance people viewing the site won't see the accordion, thus it looks really bad for half the viewers?
My client wanted the information for each membership to be on a separate page, but that seems excessive, so really wanting this to work consistently.

Currently used this article to help https://fallonmade.com/blog/accordion-dropdown-squarespace-css
but other's I've used have had the same problem of not toggling.

Password for site is: Bacon

Hi, It seem like you did copy paste code and did not update it according to your heading size.

go to you JavaScript and CSS code which you get from that article replace h2 to h4 on both codes (Javascript and CSS)

<----- Updated code ----->
<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h4').css('cursor','pointer');
$(".markdown-block .sqs-block-content h4").nextUntil("h4").slideToggle();
$(".markdown-block .sqs-block-content h4").click(function() {$(this).nextUntil("h2").slideToggle();});
});
</script>


Same thing do with CSS replace all h2 to h4.