[Share] Accordion Block: Useful code

19 hours ago, crisisandcreativity said:

Yes, here it is: https://www.molinarostudio.com/jewelry

Can you share link to exact page? I don't see accordion on Jewelry page

On 11/8/2021 at 7:47 AM, tuanphan said:

Squarespace released an Accordion Block a few weeks ago.

Here are some useful code when you use the accordion block (Add to Design > Custom CSS)

#1. Change Dividers Color

/* accordion divider color */
.accordion-divider {
    color: #ff00ff !important;
}

#2. Change Arrows Color

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

#3. Add icons before Accordion Titles

/* Accordion icons before titles */
li.accordion-item .accordion-item__title:before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
}
li.accordion-item:nth-child(1) .accordion-item__title:before {
    background-image: url(https://cdn.pixabay.com/photo/2021/11/02/15/30/tealights-6763542__340.jpg);
}
li.accordion-item:nth-child(2) .accordion-item__title:before {
    background-image: url(https://cdn.pixabay.com/photo/2019/10/23/06/30/hamburg-4570577__340.jpg);
}
li.accordion-item:nth-child(3) .accordion-item__title:before {
    background-image: url(https://cdn.pixabay.com/photo/2021/02/17/08/02/woman-6023442__340.jpg);
}

#4. Different Color for Accordion Titles

/* accordion title colors */
li.accordion-item:nth-child(1) .accordion-item__title {
    color: red;
}
li.accordion-item:nth-child(2) .accordion-item__title {
    color: blue;
}
li.accordion-item:nth-child(3) .accordion-item__title {
    color: violet;
}

#5. Change a specific word color in Accordion Content

First make it bold then use this CSS

/* accordion content specific word color */
.accordion-item__description strong {
    font-weight: normal;
    color: red;
}

#6. Accordion Title Background Color

/* accordion title background */
.sqs-block-accordion .accordion-item__title-wrapper {
    background-color: #32a4e6;
}

#7. Accordion Content Background

/* accordion content background */
.sqs-block-accordion .accordion-item__dropdown--open {
    background-color: #262853;
    color: white;
}

#8. Add Unordered List in Accordion Content

First, add some text then Underline them

Next, use this CSS

/* 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: 3px;
}
span[style*="text-decoration"] {
    text-decoration: none !important;
}

#9. Accordion Titles – Add Line Break

If you use a Business Plan or higher, you can use another approach in this comment

/* Accordion SubTitle */
li:nth-child(1) span.accordion-item__title:after {
    content: "Accordion Subtitle 01";
    display: block;
    font-size: 15px;
}
li:nth-child(2) span.accordion-item__title:after {
    content: "Accordion Subtitle 02";
    display: block;
    font-size: 15px;
}
li:nth-child(3) span.accordion-item__title:after {
    content: "Accordion Subtitle 03";
    display: block;
    font-size: 15px;
}

Result

#10. Accordion Title-Content Text Size on Mobile only

/* accordion title - content text size on mobile */
@media screen and (max-width:767px) {
/* accordion title */
span.accordion-item__title {
    font-size: 12px !important;
}
/* accordion content */
.accordion-item__description * {
    font-size: 10px !important;
}
}

#11. Simple Style 01

Add a Code Block under Accordion >> Use this code

<style>
/* accordion title color */
.accordion-item__title-wrapper {
    background-color: #1a252f;
    color: white;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.accordion-item__click-target {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
/* make first item round corner */
li.accordion-item:first-child .accordion-item__title-wrapper {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
/* make last item round corner */
li.accordion-item:last-child:not[data-is-open="true"] .accordion-item__title-wrapper {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
/* remove divider between accordion items */
.accordion-divider {
    display: none;
}
/* accordion content padding */
.accordion-item__description {
    max-width: unset !important;
    padding: 20px !important;
}
/* arrows color */
.plus>div {
    color: white !important;
}
</style>

Coming soon.

#12. Accordion Content Link Style

/* Links underline */
div.accordion-item__description p a {
    border-bottom: 1px solid black;
}
/* Links font style */
div.accordion-item__description p a {
    color: red !important;
    font-size: 30px;
    font-family: monospace;
    letter-spacing: 2px;
}

#13. Add a button inside Accordion Content

First, you need to add a text link. Next, add this CSS to turn link to button

/* turn accordion link to button */
div.accordion-item__description p a {
    background-color: black;
    color: white !important;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-color: red;
    border-width: 1px;
    border-style: solid;
}

#14. Add an Image inside Accordion Content

Use this CSS to add image to top or bottom of accordion content

/* Add an image into Accordion Content */
/* replace demo image with your image url */
/* nth-child(1) is first accordion item, nth-child(2) is second item... */
/* :before is image on top, :after if image on bottom */
li:nth-child(1) .accordion-item__description:before {
    content: "";
    display: block;
    width: 100%; /* image width, you can also use px */
    height: 150px; /* image height */
    background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px; /* space between image-text */
}

#15. Change Plus/Minus (+/-) to custom icon

Replace demo image urls with your icon urls

/* Plus */
:not([data-is-open="true"]) .plus {
    background-image: url(https://cdn.pixabay.com/photo/2021/02/06/09/03/man-5987447__340.jpg) !important;
    background-size: contain;
    background-repeat: no-repeat;
}
:not([data-is-open="true"]) .plus div {
    display: none;
}
/* Minus */
[data-is-open="true"] .plus {
    background-image: url(https://cdn.pixabay.com/photo/2021/12/12/22/17/red-squirrel-6867105__480.jpg) !important;
    background-size: contain;
    background-repeat: no-repeat;
}
[data-is-open="true"] .plus div {
    display: none;
}

#16. Change style of a word on Accordion Title

See this comment

Wrote by @tuanphan

@tuanphan I'm trying to change the color of the entire title for a specific accordion block.
I need to do this with CSS rather than change the h4 color in site styles as I do NOT want to change the color site wide, only block by block. Could you possibly share code for this? Thank you!!

23 hours ago, tuanphan said:

Can you share link to exact page? I don't see accordion on Jewelry page

It's on the jewelry page at the top. Where it says Phenomenon of Form.. that is a single accordion. 

I have one other issue. I added this code to make it so that the rest of the page below that accordion shifts up and down as you open and close it.

section[data-section-id="62ff74d4ea4f8b2ff00d8312"] .fluid-engine {
  display: block;
}

It works, but I only want it to affect *that* accordion on that page. The code also affected the accordions on this page:  https://www.molinarostudio.com/info which makes the picture get bigger when you open the accordion, which I do not want to happen.

Can I make that code work only for the accordion on the jewelry page? Thank you!

On 9/9/2022 at 2:10 PM, ilseS said:

@tuanphan I'm trying to change the color of the entire title for a specific accordion block.
I need to do this with CSS rather than change the h4 color in site styles as I do NOT want to change the color site wide, only block by block. Could you possibly share code for this? Thank you!!

use this

#enter-accordion-block-id span.accordion-item__title {
    color: red;
}

On 8/26/2022 at 12:01 PM, SophieCartwright said:

Hi @tuanphan

I have use the code from #14 to add an image to the top of my accordion block. 

But the full image isn't show on mobile. 

How can I fix this?

I don't see image on top accordion. Can you check it again?

https://www.molinarostudio.com/jewelry

22 hours ago, crisisandcreativity said:

It's on the jewelry page at the top. Where it says Phenomenon of Form.. that is a single accordion. 

I have one other issue. I added this code to make it so that the rest of the page below that accordion shifts up and down as you open and close it.

section[data-section-id="62ff74d4ea4f8b2ff00d8312"] .fluid-engine {
  display: block;
}

It works, but I only want it to affect *that* accordion on that page. The code also affected the accordions on this page:  https://www.molinarostudio.com/info which makes the picture get bigger when you open the accordion, which I do not want to happen.

Can I make that code work only for the accordion on the jewelry page? Thank you!

You can add code to Page Header of that page

<style>
  section[data-section-id="62ff74d4ea4f8b2ff00d8312"] .fluid-engine {
  display: block;
}
</style>

On 9/10/2022 at 6:43 AM, tuanphan said:

You can add code to Page Header of that page

<style>
  section[data-section-id="62ff74d4ea4f8b2ff00d8312"] .fluid-engine {
  display: block;
}
</style>

 

I'm sorry, how do I add code to the Page Header of that page?

7 hours ago, crisisandcreativity said:

I'm sorry, how do I add code to the Page Header of that page?

Please see per-page code injection.

Hey @tuanphan is there a way to bold part of the subheading within the css code you provided on this thread? 

1.  The client wants the first sentence bolded.

2.  I notice that sentence breaks (two space bars) are not reflected online, only within CSS.  Is there a way to fix this?  Here's the code I have, thank you!!

li:nth-child(2) span.accordion-item__title:after {
 margin-top: 5%;
    content:"We are a nut free facility.    At TLA, we recognize that each student is individual and unique.  Some of our students have allergies and/or certain health and developmental needs that require personalized care and attention.";
    display: block;
    font-size: 18px;
  }

On 9/10/2022 at 6:43 AM, tuanphan said:

You can add code to Page Header of that page

<style>
  section[data-section-id="62ff74d4ea4f8b2ff00d8312"] .fluid-engine {
  display: block;
}
</style>

 

Thank you, I just did that and deleted the code from the custom css panel and the problem on the info page still persists. Do you have any other thoughts on this?

On 9/15/2022 at 3:20 AM, DevonHarris said:

Hey @tuanphan is there a way to bold part of the subheading within the css code you provided on this thread? 

1.  The client wants the first sentence bolded.

2.  I notice that sentence breaks (two space bars) are not reflected online, only within CSS.  Is there a way to fix this?  Here's the code I have, thank you!!

 

li:nth-child(2) span.accordion-item__title:after {
 margin-top: 5%;
    content:"We are a nut free facility.    At TLA, we recognize that each student is individual and unique.  Some of our students have allergies and/or certain health and developmental needs that require personalized care and attention.";
    display: block;
    font-size: 18px;
  }

#1. This will require script code + Business Plan or higher. Can you share link to page where you added accordion? We can test code easier

#2. Can you take a screenshot?

On 9/15/2022 at 11:15 PM, crisisandcreativity said:

Thank you, I just did that and deleted the code from the custom css panel and the problem on the info page still persists. Do you have any other thoughts on this?

Can you share link to page where you have problem?

19 hours ago, tuanphan said:

#1. This will require script code + Business Plan or higher. Can you share link to page where you added accordion? We can test code easier

#2. Can you take a screenshot?

Can you share link to page where you have problem?

Hey!  It’s www.TLAStMarks.com/health 

On 9/17/2022 at 11:02 PM, tuanphan said:

#1. This will require script code + Business Plan or higher. Can you share link to page where you added accordion? We can test code easier

#2. Can you take a screenshot?

Can you share link to page where you have problem?

I might be getting different conversations on this thread confused, so I'm going to try and summarize/consolidate here. 

I added the code below to the Page Header of this Jewelry page in order to make the page content shift down when the accordion is open, and up when the accordion is closed. It works.

I added the same code with a new, respective data section id number into the Page Header of a similar page and it works.

However, even thought that code is not in the Page Header of  this Info page, the images get bigger when the accordion is opened, as shown in the two screenshots, which never used to happen prior to this. I'm wishing for the image not to change when the accordion is toggled.

This is the code I'm referring to, and there are screenshots attached:

<style>
  section[data-section-id="62ff74d4ea4f8b2ff00d8312"] .fluid-engine {
  display: block;
}
</style>

On 9/19/2022 at 5:47 AM, DevonHarris said:

Hey!  It’s www.TLAStMarks.com/health 

#1. Bold these text?

#2. What should it look like?

15 hours ago, crisisandcreativity said:

I might be getting different conversations on this thread confused, so I'm going to try and summarize/consolidate here. 

I added the code below to the Page Header of this Jewelry page in order to make the page content shift down when the accordion is open, and up when the accordion is closed. It works.

I added the same code with a new, respective data section id number into the Page Header of a similar page and it works.

However, even thought that code is not in the Page Header of  this Info page, the images get bigger when the accordion is opened, as shown in the two screenshots, which never used to happen prior to this. I'm wishing for the image not to change when the accordion is toggled.

This is the code I'm referring to, and there are screenshots attached:

<style>
  section[data-section-id="62ff74d4ea4f8b2ff00d8312"] .fluid-engine {
  display: block;
}
</style>

I saw this problem once in a question, and one member said it was a bug from Squarespace. You try report it to Squarespace Customer Care to see what they say.

@tuanphan sorry no bold part of the subheading text, in the section named "Allergies" they want to bold "We are a nut free facility" ...Also you can see that there is only one space between sentences in the subheading but it should be two.  This website is for a school so they want everything to be grammatically perfect lol.  Anything you can do to help would be amazing, thank you!

16 hours ago, DevonHarris said:

@tuanphan sorry no bold part of the subheading text, in the section named "Allergies" they want to bold "We are a nut free facility" ...Also you can see that there is only one space between sentences in the subheading but it should be two.  This website is for a school so they want everything to be grammatically perfect lol.  Anything you can do to help would be amazing, thank you!

First, edit this accordion title

Quote

ALLERGIES

to this

ALLERGIES <span><em>We are a nut free facility</em>.  At TLA, we recognize that each student is individual and unique.  Some of our students have allergies and/or certain health and developmental needs that require personalized care and attention.</span>

Next, add this code to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
  $("span.accordion-item__title").each(function(){
    $(this).html($(this).text());
  });
});
</script>
<style>
  span.accordion-item__title span {
    display: block;
    font-size: 20px;
    margin-top: 20px !important;
}
  span.accordion-item__title span em {
    font-style: normal;
    font-weight: bold;
    color: red;
}
</style>

On 9/21/2022 at 5:58 AM, tuanphan said:

First, edit this accordion title

to this

ALLERGIES <span><em>We are a nut free facility</em>.  At TLA, we recognize that each student is individual and unique.  Some of our students have allergies and/or certain health and developmental needs that require personalized care and attention.</span>

Next, add this code to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
  $("span.accordion-item__title").each(function(){
    $(this).html($(this).text());
  });
});
</script>
<style>
  span.accordion-item__title span {
    display: block;
    font-size: 20px;
    margin-top: 20px !important;
}
  span.accordion-item__title span em {
    font-style: normal;
    font-weight: bold;
    color: red;
}
</style>

you are a GENIUS, THANK YOU SO MUCH!  Please post/send a link to your donation page!!!

Not sure if this was linked here before, but there is a way to create bullet points without the code. This guy here recorded the trick 😄 

Its as simple as "*+space" or "1.+space"~

On 9/27/2022 at 2:26 PM, Nanali said:

Not sure if this was linked here before, but there is a way to create bullet points without the code. This guy here recorded the trick 😄 

Its as simple as "*+space" or "1.+space"~

 

Simple but great.

Thank you!

On 3/6/2022 at 2:05 PM, creedon said:

Not easily if at all. Let me explain. I tried just simply rotating a accordion block. It rotated and seemed to function as far as toggling open/close state. That means the code that drives that part of the effect wasn't broken. What was broken was all the spacing and smooth open/close effect.

Here we see a normal accordion block.

Now here is that block rotated.

 

As you can see it doesn't function properly visually. I assume that is because the visual effect elements were designed to function in the vertical plane not horizontally.

Could the visual effect part of the accordion block be altered to function horizontally? Perhaps.

But with all the fiddling about you may be better off finding a piece of code that was designed to work how you want from the beginning. If you did go with altering an accordion block there is a good chance it would break when SS made changes to the structure of the block.

Was anyone able to find a solution for this - turning an accordion on its side/ horizontal accordion? I know you helped with a similar question here https://forum.squarespace.com/topic/214225-slide-tabs-code/. I've searched the forum and maybe I'm not using the correct search terms, but I can't find anything on it.

On 9/29/2022 at 11:07 AM, hilary said:

Was anyone able to find a solution for this - turning an accordion on its side/ horizontal accordion? I know you helped with a similar question here https://forum.squarespace.com/topic/214225-slide-tabs-code/. I've searched the forum and maybe I'm not using the correct search terms, but I can't find anything on it.

 

Like this?

Hi,

www.lesliefang.com/pawalong

I been trying to change the color in accordion paragraph text to dark grey. I try to find a code but only see it for specific word. 

1 hour ago, lfang2 said:

I been trying to change the color in accordion paragraph text

I can't find any accordion blocks on the page.

5 hours ago, creedon said:

I can't find any accordion blocks on the page.

Hi @creedon! 

LOL its there i only made ONE drop down and its probably small.  It's under research the persona labeled Brandon's journey.