[Share] Accordion Block: Useful code

On 3/11/2023 at 1:35 AM, acjr_noob said:

@tuanphan link is here: https://blenny-sepia-7zas.squarespace.com/about

Try adding to Design > Custom CSS

div#block-3cf1eefc55e1376a73e5 li:nth-child(3) p:nth-child(3):before, div#block-3cf1eefc55e1376a73e5 li:nth-child(3) p:nth-child(4):before {
    display: inline-block;
    content: "";
    background-color: red;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
}

Hey, I've found when you use an Accordion and you've scrolled down reading the first item's content, but instead of closing the first item using the minus button,  you hit the next item's plus button (because it's right there next to the bottom of the first item),  then the second item opens at the end of its content (or even below it) not the beginning.  Is there any way to correct this? Thanks.

@tuanphan Hi! I'm wanting to create a pill shape border around each heading in my accordion, and hoping for the pill shape to expand when clicked on (to show the rest of the text).  

Do you know how i might be able to do this? I have added a reference image below of what i am after. 

Thanks!

12 hours ago, koko1234 said:

I'm wanting to create a pill shape border around each heading in my accordion, and hoping for the pill shape to expand when clicked on (to show the rest of the text). 

Did you check out my May 19, 2022?

Let us know how it goes.

35 minutes ago, creedon said:

Did you check out my May 19, 2022?

Let us know how it goes.

I tried that, but it created a border around the entire accordion instead of each heading. Do you know how I could alter that code to change that? Cheers!

5 hours ago, koko1234 said:

Do you know how I could alter that code to change that?

Ah. I get ya.

Try the following as a starting point.

.sqs-block-accordion .accordion-item {

  border : 2px solid red;
  border-radius : 50px;
  margin-bottom : 15px;
  padding-left : 50px;
  padding-right : 50px;
  
  }

Let us know how it goes.

5 hours ago, creedon said:

Ah. I get ya.

Try the following as a starting point.

.sqs-block-accordion .accordion-item {

  border : 2px solid red;
  border-radius : 50px;
  margin-bottom : 15px;
  padding-left : 50px;
  padding-right : 50px;
  
  }

Let us know how it goes.

That works perfectly - Legend! Thanks heaps

hi! i used a template accordion design for a page on my site, and it has these little round bullets that i'm trying to remove, but have no idea how to. they don't look like they're part of the accordion item title, and i haven't been able to remove them through any of the provided options. i haven't really fiddled with the custom css for the page except to add underlines for hyperlinks. would anyone be able to assist please? thanks!

the page in question is https://www.derrickteoplanning.com/technical-skills

On 7/17/2023 at 4:13 PM, weeghee said:

hi! i used a template accordion design for a page on my site, and it has these little round bullets that i'm trying to remove, but have no idea how to. they don't look like they're part of the accordion item title, and i haven't been able to remove them through any of the provided options. i haven't really fiddled with the custom css for the page except to add underlines for hyperlinks. would anyone be able to assist please? thanks!

the page in question is https://www.derrickteoplanning.com/technical-skills

You have this code in CSS box, it caused problem

li>*:first-child::before {
    content: "○" !important;
}

find & change it to

li:not(.accordion-item)>*:first-child::before {
    content: "○" !important
}

Hello, apologies if this has come up before. 

I am trying to edit my accordion so that 'Show more +' turns into 'Show less -' when the text is open. 

Does anyone know the Custom CSS to get this done? 

https://trumpet-okra-z878.squarespace.com/config/pages

16 hours ago, BarryDesignsSquares said:

Hello, apologies if this has come up before. 

I am trying to edit my accordion so that 'Show more +' turns into 'Show less -' when the text is open. 

Does anyone know the Custom CSS to get this done? 

https://trumpet-okra-z878.squarespace.com/config/pages

Which page do you use accordion?

https://trumpet-okra-z878.squarespace.com/?noredirect

@tuanphan Hi! How to change the font weight within the button in the accordion block? Thank you!

1 hour ago, youroleksii said:

@tuanphan Hi! How to change the font weight within the button in the accordion block? Thank you!

Did you use code to turn link to button or? Can you share link to page where you use accordion?

@tuanphan Thank you for getting back to me! I use it on the 'home' page. Link here - https://www.creators-counsel.com/home

It's in the second section below 'About Us' 

On 8/22/2023 at 3:33 PM, BarryDesignsSquares said:

@tuanphan Thank you for getting back to me! I use it on the 'home' page. Link here - https://www.creators-counsel.com/home

It's in the second section below 'About Us' 

 

Add this to Website > Website Tools > Custom CSS

/* Show more show less */
div#block-yui_3_17_2_1_1690813166951_25850 {
li[data-is-open="true"] span.accordion-item__title {
    visibility: hidden;
}
li[data-is-open="true"] span.accordion-item__title:before {
    visibility: visible;
    content: "Show less-";
    display: block;
}}

@tuanphan you're a star thank you so much

hi, i am using accordions on the website, i have managed to build one with images, but when i make new accordions it displays the same images as the first one. i saw some code about adding style to the top and end of the code but it doesn't seem to work and just gives me error codes

i want some way of making each accordion separate on the code so i can add different images to every accordion i make.

also i wanted the images to be the full length of the accordion like they are in mobile view but in desktop view they have a gap in the right hand side of the images

i am also having issues with the header, for some reason when the drop down menu is shown on mobile it shows my text in white when it should be black i am guessing i have missed something that's easy to change on it but i cant find what i have done wrong.

the websites no where near finished but i wanted to make sure the coding was right before i started to make it look fancy. hopefully someone on here knows how to sort the accordion code

cheers

On 10/10/2023 at 7:25 PM, damianjames said:

hi, i am using accordions on the website, i have managed to build one with images, but when i make new accordions it displays the same images as the first one. i saw some code about adding style to the top and end of the code but it doesn't seem to work and just gives me error codes

i want some way of making each accordion separate on the code so i can add different images to every accordion i make.

also i wanted the images to be the full length of the accordion like they are in mobile view but in desktop view they have a gap in the right hand side of the images

i am also having issues with the header, for some reason when the drop down menu is shown on mobile it shows my text in white when it should be black i am guessing i have missed something that's easy to change on it but i cant find what i have done wrong.

 

the websites no where near finished but i wanted to make sure the coding was right before i started to make it look fancy. hopefully someone on here knows how to sort the accordion code

 

cheers

Hi,

Can you share link to page where you use accordion?

Great list @tuanphan! I need No 14 but  i have many accordion blocks in the site. 

it would be very helpful if there is a way for a specific section or block. also when I edit the size of the image it doesn't change in all but only in one accordion block

Hi

I'm changing the PLUS icon to an image but can't see how to change the image size. I can make it bigger  but the container size is cropping it I think.

//Change Accordian Plus/Minus (+/-) to custom icon//
/* Plus */
:not([data-is-open="true"]) .plus {
    background-image: url(https://images.squarespace-cdn.com/content/5e2868d5cfb9407f12460366/ef8e49c5-d627-4702-a11e-59858a99f715/More+Info+Wit+Arrow+Image.png?content-type=image%2Fpng) !important;
    background-size: contain;
    background-repeat: no-repeat;
}
:not([data-is-open="true"]) .plus div {
    display: none;
}

On 10/27/2023 at 11:08 PM, LarryAP said:

Hi

I'm changing the PLUS icon to an image but can't see how to change the image size. I can make it bigger  but the container size is cropping it I think.

 

//Change Accordian Plus/Minus (+/-) to custom icon//
/* Plus */
:not([data-is-open="true"]) .plus {
    background-image: url(https://images.squarespace-cdn.com/content/5e2868d5cfb9407f12460366/ef8e49c5-d627-4702-a11e-59858a99f715/More+Info+Wit+Arrow+Image.png?content-type=image%2Fpng) !important;
    background-size: contain;
    background-repeat: no-repeat;
}
:not([data-is-open="true"]) .plus div {
    display: none;
}

You can change contain to a specific value, for example: background-size: 100px;

On 10/26/2023 at 4:37 PM, Despina said:

Great list @tuanphan! I need No 14 but  i have many accordion blocks in the site. 

it would be very helpful if there is a way for a specific section or block. also when I edit the size of the image it doesn't change in all but only in one accordion block

You can add accordion-block id before selector 

#accordion-block-id li:nth-child(1) .accordion-item__description:before

use this tool to find id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Hi @Tuanphan

Thanks for this. I had tried changing the word contain to a value, the image changes size no problem but is still being cropped. Images attached. I'd appreciate it if you could tell me what I'm doing wrong, thanks.

Laurence

Quote

 

Hi

I'm changing the PLUS icon to an image but can't see how to change the image size. I can make it bigger  but the container size is cropping it I think.

 

//Change Accordian Plus/Minus (+/-) to custom icon//
/* Plus */
:not([data-is-open="true"]) .plus {
    background-image: url(https://images.squarespace-cdn.com/content/5e2868d5cfb9407f12460366/ef8e49c5-d627-4702-a11e-59858a99f715/More+Info+Wit+Arrow+Image.png?content-type=image%2Fpng) !important;
    background-size: contain;
    background-repeat: no-repeat;
}
:not([data-is-open="true"]) .plus div {
    display: none;
}

You can change contain to a specific value, for example: background-size

 

: 100px;

On 10/31/2023 at 11:32 PM, LarryAP said:

 

Hi @Tuanphan

Thanks for this. I had tried changing the word contain to a value, the image changes size no problem but is still being cropped. Images attached. I'd appreciate it if you could tell me what I'm doing wrong, thanks.

Laurence

 

: 100px;

Can you share link to this page? I can check code easier

1 hour ago, tuanphan said:

Can you share link to this page? I can check code easier

Yes: https://www.alliancepackaging.ie/branded-products

Do you think it could be conflicting code? Thanks for your help on this.

On 11/3/2023 at 3:41 PM, LarryAP said:

Yes: https://www.alliancepackaging.ie/branded-products

Do you think it could be conflicting code? Thanks for your help on this.

The parent container has a limit 30px x 30px width + height

You can add code to increase this

.sqs-block-accordion .accordion-icon-container {
    width: 300px !important;
    height: 300px !important;
}

then change background size to contain is enough

:not([data-is-open="true"]) .plus {
    background-image: url(https://images.squarespace-cdn.com/content/5e2868d5cfb9407f12460366/ef8e49c5-d627-4702-a11e-59858a99f715/More+Info+Wit+Arrow+Image.png?content-type=image%2Fpng) !important;
    background-size: contain;
    background-repeat: no-repeat
}