Jump to content

Accordion Help. (It works when it wants to)

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://tulip-ranunculus-xc8d.squarespace.com/build-your-trip

Hello,

I have coded accordions for my website and they seem to work for some people and not others.

I've been able to recreate the issue where the accordions don't open on google chrome and mobile view via google chrome. 

I'm not seeing any particular errors in the console that is pointing to this issue.

Could anyone see if they are able to recreate this issue in chrome or if they are able to help?

https://tulip-ranunculus-xc8d.squarespace.com/build-your-trip

Password: "SuperTrip"

Link to comment
4 hours ago, Dhowbearcat said:

Site URL: https://tulip-ranunculus-xc8d.squarespace.com/build-your-trip

Hello,

I have coded accordions for my website and they seem to work for some people and not others.

I've been able to recreate the issue where the accordions don't open on google chrome and mobile view via google chrome. 

I'm not seeing any particular errors in the console that is pointing to this issue.

Could anyone see if they are able to recreate this issue in chrome or if they are able to help?

https://tulip-ranunculus-xc8d.squarespace.com/build-your-trip

Password: "SuperTrip"

I used Edge and can't reproduce the issue, did it just randomly show up

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
6 hours ago, Dhowbearcat said:

I have coded accordions for my website and they seem to work for some people and not others.

You are using a Brine-family template and this issue is because of Ajax Page Loading. I wrote about this issue and how to solve it here: Why does Squarespace code only work on refresh?

You can reproduce the issue if you use an incognito window to visit your homepage first. Then, navigate to the 'build your trip' page using the page link. You'll see the accordion doesn't work. When you refresh the page, the accordion will work.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

@bangak36 - It would work for me then it would randomly do this. I've had others test it sometimes it works sometimes it does not.

@Paul2009 - Thanks Paul I was afraid this was going to be the issue. I disabled the Ajax loading. And it seems fine now when I try to recreate the issue. I'm going to have others test on different browsers and devices.

Link to comment
Quote

And it seems fine now when I try to recreate the issue. I'm going to have others test on different browsers and devices.

I followed paul2009's steps yesterday and was able to reproduce the issue.

I tested again after you made the change, just now, it appears to be working fine.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 weeks later...
  • Solution

If you are having difficulties with custom coded accordions, you may want to know that Squarespace launched a new Accordion Block yesterday.

This new native block doesn't require custom code and is therefore safer and easier to install.

spacer.png

It is ideal for FAQs and product specifications. You can choose and style the icon, add dividers and change row padding. For more information see Accordion blocks.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.