Jump to content

Applying different styles to multiple accordion blocks on same page

Go to solution Solved by Ziggy,

Recommended Posts

Posted

Hi everyone,

I've applied some styling to the accordion on the 'Air Roasting' page, but I now need another accordion on the Air-Motion 3 page, under Roasters with plain default accordion styling.

I've added the accordion on the Air-Motion 3 page, but it's picking up the styling from the 1st accordion, which I don't need on this page.

Is there a way to apply this styling only to the accordion on 'Air Roasting' page?

.accordion-item__click-target::before {
  background-size: contain;
  content: '';
  height: 40px;
  margin-right: 10px;
  width: 40px;
}

.accordion-item:nth-child(1) .accordion-item__click-target::before {
  background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/4ed3b787-0a03-4c60-adb8-0d5091a25d19/clock_icon.png?content-type=image%2Fpng);
}
.accordion-item:nth-child(2) .accordion-item__click-target::before {
  background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/eb89036b-f4b1-4a6c-9aee-0a3dd24c7b6d/recycle_icon.png?content-type=image%2Fpng);
}
.accordion-item:nth-child(3) .accordion-item__click-target::before {
  background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/faa4b451-ea61-49d7-98d3-111a165898f4/temp_icon.png?content-type=image%2Fpng);
}
.accordion-item:nth-child(4) .accordion-item__click-target::before {
  background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/ce9ff8e1-dca8-4cda-9990-05b4cff3a04e/cog_icon.png?content-type=image%2Fpng);
}
.accordion-item:nth-child(5) .accordion-item__click-target::before {
  background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/68a415eb-3c10-4f45-a1e6-2ae6bcb68a76/finger2_icon.png?content-type=image%2Fpng);
}

Site is https://vanilla-snail-g56h.squarespace.com/

Password for the site is AirR0aster23

  • Replies 3
  • Views 605
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution
Posted
4 hours ago, groundsy said:

Is there a way to apply this styling only to the accordion on 'Air Roasting' page?

Yes, you need to target the CSS to the specific accordion block. You can find block, section, and page IDs like this:

https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

and apply the block ID at the start and wrap the rest of the CSS within curly brackets like this:

#block-yui_3_17_2_1_1684245629356_5788 {

***  Current CSS here ***

}

and here it si put together and targeted to the accordion on the Air Roasting page:

#block-yui_3_17_2_1_1684245629356_5788 {

.accordion-item__click-target::before {
  background-size: contain;
  content: '';
  height: 40px;
  margin-right: 10px;
  width: 40px;
}

.accordion-item:nth-child(1) .accordion-item__click-target::before {
  background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/4ed3b787-0a03-4c60-adb8-0d5091a25d19/clock_icon.png?content-type=image%2Fpng);
}
.accordion-item:nth-child(2) .accordion-item__click-target::before {
  background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/eb89036b-f4b1-4a6c-9aee-0a3dd24c7b6d/recycle_icon.png?content-type=image%2Fpng);
}
.accordion-item:nth-child(3) .accordion-item__click-target::before {
  background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/faa4b451-ea61-49d7-98d3-111a165898f4/temp_icon.png?content-type=image%2Fpng);
}
.accordion-item:nth-child(4) .accordion-item__click-target::before {
  background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/ce9ff8e1-dca8-4cda-9990-05b4cff3a04e/cog_icon.png?content-type=image%2Fpng);
}
.accordion-item:nth-child(5) .accordion-item__click-target::before {
  background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/68a415eb-3c10-4f45-a1e6-2ae6bcb68a76/finger2_icon.png?content-type=image%2Fpng);
}

}

Hope that helps!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted
8 minutes ago, groundsy said:

Thanks for your help @Ziggy that worked perfectly!

No problem, thanks for marking my post as the solution.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

  • John_SQSP changed the title to Applying different styles to multiple accordion blocks on same page

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.