Jump to content

Customising accordion block

Recommended Posts

Posted

Hello again,

I have another question in regards to a project I am working. The client would like an accordion with an icon in front of the title. I have added some CSS which enabled me to do just that, but now I struggle to formate the title next to the icon and I also need the content in the drop down to be aligned with the title.

I also would prefer to use the Plus icon, but for some reason I can only change the colour for Arrow icon.

Please see URL above.

The code I am using as follows:

//**Accordion**//
.accordion-item {
   background-color: #fff;
   padding: 0px 30px!important;
   margin-bottom: 8px!important;
}

/* accordion arrows color */
.accordion-block .arrow {
    border-color: #ff7814 !important;
}

/* Accordion icons before titles */
li.accordion-item .accordion-item__title:before {
    content: "";
    width: 70px;
    height: 70px;
      padding-left: 30px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
}
li.accordion-item:nth-child(1) .accordion-item__title:before {
    background-image: url(https://static1.squarespace.com/static/61e6e195764df1475a9d9baf/t/6352a223afcc491a64e65f8a/1666359844001/icons_accordion_01.pnghttps://static1.squarespace.com/static/61e6e195764df1475a9d9baf/t/6352a223afcc491a64e65f8a/1666359844001/icons_accordion_01.pngttps://cdn.pixabay.com/photo/2021/11/02/15/30/tealights-6763542__340.jpg);
  padding-right: 20px;
}
li.accordion-item:nth-child(2) .accordion-item__title:before {
    background-image: url(https://static1.squarespace.com/static/61e6e195764df1475a9d9baf/t/6352a25428fd920a4ee6a8b7/1666359892648/icons_accordion_02.pnghttps://static1.squarespace.com/static/61e6e195764df1475a9d9baf/t/6352a25428fd920a4ee6a8b7/1666359892648/icons_accordion_02.pnghttps://static1.squarespace.com/static/61e6e195764df1475a9d9baf/t/6352a25428fd920a4ee6a8b7/1666359892648/icons_accordion_02.pnghttps://cdn.pixabay.com/photo/2019/10/23/06/30/hamburg-4570577__340.jpg);
  padding-right: 20px;
}
li.accordion-item:nth-child(3) .accordion-item__title:before {
    background-image: url(https://static1.squarespace.com/static/61e6e195764df1475a9d9baf/t/6352a2bd0411dd54a0be9c40/1666359997047/icons_accordion_03.pnghttps://static1.squarespace.com/static/61e6e195764df1475a9d9baf/t/6352a2bd0411dd54a0be9c40/1666359997047/icons_accordion_03.pnghttps://static1.squarespace.com/static/61e6e195764df1475a9d9baf/t/6352a25428fd920a4ee6a8b7/1666359892648/icons_accordion_02.pnghttps://static1.squarespace.com/static/61e6e195764df1475a9d9baf/t/6352a25428fd920a4ee6a8b7/1666359892648/icons_accordion_02.pnghttps://static1.squarespace.com/static/61e6e195764df1475a9d9baf/t/6352a25428fd920a4ee6a8b7/1666359892648/icons_accordion_02.pnghttps://static1.squarespace.com/static/61e6e195764df1475a9d9baf/t/6352a2bd0411dd54a0be9c40/1666359997047/icons_accordion_03.pnghttps://static1.squarespace.com/static/61e6e195764df1475a9d9baf/t/6352a2bd0411dd54a0be9c40/1666359997047/icons_accordion_03.pnghttps://cdn.pixabay.com/photo/2021/02/17/08/02/woman-6023442__340.jpg);
  padding-right: 20px;
}

/* Accordion Content - Add Unordered list */
span[style*="text-decoration"]:before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    background-color: black;
    vertical-align: middle;
    margin-right: 8px;
}
span[style*="text-decoration"] {
    text-decoration: none !important;
}
 

Thank you very much in advance for your help!

Posted

Ca you share your website URL, page and password? Thanks!

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

Try this CSS:

@media only screen and (min-width:540px) {
  .sqs-block-accordion .accordion-item__dropdown--open {
    margin-left: 94px;
  }
}

Hope that works for you.

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
On 11/12/2022 at 3:18 PM, Ziggy said:

Try this CSS:

@media only screen and (min-width:540px) {
  .sqs-block-accordion .accordion-item__dropdown--open {
    margin-left: 94px;
  }
}

Hope that works for you.

Perfect this is working thank you!

Posted

Swap the previous code for this:

@media only screen and (min-width:540px) {
  .sqs-block-accordion .accordion-item__dropdown--open {
    margin-left: 94px;
  }
  .sqs-block-accordion .accordion-item__title {
    display: flex;
    align-items: center;
  }
}

The second portion should vertically center the text next to the icon.

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
23 hours ago, Ziggy said:

Swap the previous code for this:

@media only screen and (min-width:540px) {
  .sqs-block-accordion .accordion-item__dropdown--open {
    margin-left: 94px;
  }
  .sqs-block-accordion .accordion-item__title {
    display: flex;
    align-items: center;
  }
}

The second portion should vertically center the text next to the icon.

Thank you, this is now working perfectly!

Posted

Brilliant! Glad that worked for you!

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?

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.