Customising accordion block

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!

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

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

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

Thank you!

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?

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.

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!

Is there any chance to align the title next to the icon so that it sits more centred to the icon?

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.

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!

Brilliant! Glad that worked for you!