Jump to content

Accordion coding not working

Recommended Posts

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

Link to comment
  • Replies 4
  • Views 821
  • Created
  • Last Reply
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.
Link to comment

Not related, you can use this accordion tab plugin to add accordion or tabs. Easy to do/customize.

Furthermore, you can easily add any block (Text Block, Image Block, Summary Block, Gallery Block...) to Accordion Content.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I just found some problems on your site. Do you want to fix these?

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

1. (Mobile-Homepage) Change order to title-image-title-image?

circle-wrasse-4735.squarespace.com-01-mi

2. (Mobile-Footer) Align center footer links?

circle-wrasse-4735.squarespace.com-02-mi

3. (Mobile-Homepage) Make text inside yellow

circle-wrasse-4735.squarespace.com-03-mi

4. (Tablet-Footer) Make footer better?

circle-wrasse-4735.squarespace.com-04-mi

5. (Tablet-Homepage) Align center text-image?

circle-wrasse-4735.squarespace.com-05-mi

6. (Tablet-Homepage) Text overflow border

circle-wrasse-4735.squarespace.com-06-mi

7. (Tablet-About tat)

circle-wrasse-4735.squarespace.com-07-mi

8. (Mobile-About tat) Move image under text?

circle-wrasse-4735.squarespace.com-08-mi

9. (Tablet-Store) change to 2 products/row?

circle-wrasse-4735.squarespace.com-09-mi

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.