Jump to content

Multiple Accordions in one website

Recommended Posts

Site URL: https://www.velocitta.it

I am trying to make two different accordions in one of my page (it is the program of a festival wich develops in 2 days, I really like the hide and see accordion feature, so I am trying to customize the accordions and make it work for my specific case)

Here is my situation:

I have 2 accordions for the 2 days (Saturday, Sunday) one next to each other ;

in every accordion I have multiple items ; every item is one event ; every event has an icon wich refers to the 'type' of event (bike ride, food, game, talk, ...) 
I succeeded in putting this icons by adding some CSS and following @tuanphan codes injection.
My problem now is for example: the Item 1 of Accordion 1 (Saturday) has the 'food' icon ; but the Item 1 of Accordion 2 should have the 'game' icon. But since it is the 1st Item it will automatically give the same icon since he considers I have 1 accordion only.

Is there a way to name differently the 2 accordions so that they are not linked?
Do you have any advise? Thank you !!

Screenshot 2022-04-29 at 20.48.05.png

Screenshot 2022-04-29 at 20.48.43.png

Link to comment
  • Replies 2
  • Views 397
  • Created
  • Last Reply

Top Posters In This Topic

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.