Jump to content

Customising accordion block

Recommended Posts

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!

Link to comment

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 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 11/9/2022 at 11:53 PM, onika said:

This page is being build in a live site and this is the URL

https://about.visitorapp.io/new-start

Thank you!

Align follow this red line?

image.thumb.png.ec72d49b10239b71d86e4d3d6e09f8f8.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!

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.