Jump to content

How to make a section into an accordion functionality?

Recommended Posts

Hello!

I'm working on a new concept for a website and I am trying to figure out if there is a way to write custom code to add accordion functionality (open/close) to a section in Squarespace. I have tried using the accordion block, however it does not allow me to add images -let alone make them open into a lightbox. Screenshots below of what I would like to do, vs. how far I got the Squarespace template. Will need to:

– Add + and - icons to right, top side of each section, in-line with the category title
– Make them open and close the section on click

Website: https://raccoon-banjo-jnw9.squarespace.com/sereno-sofia-parazi-photography
PW: hairandmakeup


Any ideas?
Julie

Screen Shot 2023-02-07 at 12.14.30 PM.png

Screen Shot 2023-02-07 at 12.15.00 PM.png

Screen Shot 2023-02-07 at 12.15.23 PM.png

Link to comment
  • Replies 6
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

The only code to edit in the installed code is the duration.

      // duration, a number (milliseconds) or the word slow or fast
      
      duration : '10',
      
      // duration : '[enter duration between single quotes replacing square brackets]',

There is an extra line in there that may be confusing. I need to remove it in a "bug" fix update. It's not a bug but just an extra useless line.

The rest of the configuration is described in the instructions.

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
3 hours ago, creedon said:

The only code to edit in the installed code is the duration.

      // duration, a number (milliseconds) or the word slow or fast
      
      duration : '10',
      
      // duration : '[enter duration between single quotes replacing square brackets]',

There is an extra line in there that may be confusing. I need to remove it in a "bug" fix update. It's not a bug but just an extra useless line.

The rest of the configuration is described in the instructions.

Hmmm. I've gone ahead and added both code snippets to the current site, but it didn't seem to do anything (I did also check it on incognito mode). I have each section separated on the site, ideally clicking either the title or the plus would open/close the section.

Screen Shot 2023-02-14 at 3.57.37 PM.png

Screen Shot 2023-02-14 at 3.58.11 PM.png

Screen Shot 2023-02-14 at 3.59.48 PM.png

Screen Shot 2023-02-14 at 3.59.57 PM.png

Link to comment

It appears you have an ancient version of the code I wrote and have not installed the newest code I've pointed to.

That ancient code was written way before Fluid Engine was released. It won't work so you should remove it.

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
  • 1 year later...

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.