Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 6

[Share] Accordion Block: Useful code


tuanphan

Question

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

unorderlist-accordion-block.png

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

/* 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

accordion-subtitle.png

#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>

accordion-style-01-min.png

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;
}

Wrote by @tuanphan

Edited by tuanphan

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

Recommended Posts

  • 0

Impressed! Thanks for the effort tuan

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
9 minutes ago, ClaireWard said:

This is so helpful, than you @tuanphan

Do you know if there is a way to centre everything? Eg Headline, arrow, and content underneath, so I could centre this under the button...1733202805_ScreenShot2021-11-08at9_25_25pm.thumb.png.ee83bec23734575636ddab89a088cd1a.png

Try edit Accordion Block > Design > Title > Alignment: Choose Center

If it doesn't work, you can share link to page in screenshot, we can check easier

 

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
  • 0
On 11/7/2021 at 11:47 PM, tuanphan said:
/* 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);
}

Hi @tuanphan, I tried this here: https://devmatcon2.squarespace.com/?password=sneakpeek but I am not getting the PNG's I uploaded. 

 

Very impressive list my friend!

Edited by RolandFuseHub
Link to comment
  • 0
38 minutes ago, RolandFuseHub said:

Hi @tuanphan, I tried this here: https://devmatcon2.squarespace.com/?password=sneakpeek but I am not getting the PNG's I uploaded. 

 

Very impressive list my friend!

I see the code worked, however the icon is very small. You can zoom browser to see it, or increase width & height in the code

In screenshot I increased to width: 100px, height: 100px;

image.thumb.png.ca609ce4ece626808df53f27a998f333.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
  • 0
8 minutes ago, RolandFuseHub said:

Icons I have used are 400px so ... ;o)

but in this case the icon size will be decided by the icon container

Quote
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;
}

 

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
  • 0
On 11/12/2021 at 1:57 AM, majorscreative said:

This is very useful. Thank you. I don't see a way to style links. I need to link to documents in my drop downs and there is currently no way to differential which text has a link. Any ideas?

 

Thank for suggestion.

Added

  • Accordion Content Link Style (add underline, change font style)
  • Add a button/image into Accordion Content

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
  • 0

Hmm... think I figured it out BUT now I have another question:

/* accordion with columns inside*/
.accordion-item__description  {
   columns: 2;
 column-gap: 30px;

    }

@media screen and (max-width:640px) {
.accordion-item__description  {
  columns: 1;
}
}

How can I now make the accordion title sticky so that people can close it easily if they don't feel like looking at the contents?

 

Edited by NIkiL
Link to comment
  • 0
7 hours ago, NIkiL said:

Hmm... think I figured it out BUT now I have another question:

/* accordion with columns inside*/
.accordion-item__description  {
   columns: 2;
 column-gap: 30px;

    }

@media screen and (max-width:640px) {
.accordion-item__description  {
  columns: 1;
}
}

How can I now make the accordion title sticky so that people can close it easily if they don't feel like looking at the contents?

 

#1. You can also use this shorter code

@media screen and (min-width:768px) {
.accordion-item__description  {
   columns: 2;
 column-gap: 30px;
    }
}

#2. You can consider limit height of accordion content, then add scroll bar on right with CSS. This will be easier

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
  • 0
17 hours ago, tuanphan said:

#2. You can consider limit height of accordion content, then add scroll bar on right with CSS. This will be easier

OK! What CSS would I use for this, please? Thank you for all your help!

Another way to think about it: how to keep the sticky accordion title STAYING sticky even after it is closed?

(I can imagine this would be complicated if there is more than one accordion in a page. I only have one accordion section in my page, though.)

 

Edited by NIkiL
Link to comment
  • 0
10 hours ago, NIkiL said:

OK! What CSS would I use for this, please? Thank you for all your help!

Another way to think about it: how to keep the sticky accordion title STAYING sticky even after it is closed?

(I can imagine this would be complicated if there is more than one accordion in a page. I only have one accordion section in my page, though.)

 

Can you share link to page where you use accordion?

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
  • 0
On 11/17/2021 at 5:24 PM, tuanphan said:

Can you share link to page where you use accordion?

@tuanphan

Hi! I am hoping to find a code to help me with the new accordion feature. The accordion is popping up underneath my photo, to the left of my product description on desktop, and I would like the order to be 1.product title, 2.price, 3.description, 4.accordion, 5.add to cart button. 

 

On mobile view the order is 1.product title, 2.price, 3.add to cart button, 4.description, 5.accordion

 

Let me know if you can help me! I'm desperate lol. I've attached screenshots! Thank you!

Screen Shot 2021-12-01 at 9.20.14 PM.png

Screen Shot 2021-12-01 at 9.20.38 PM.png

Link to comment
  • 0
3 hours ago, feelingantisocial said:

@tuanphan

Hi! I am hoping to find a code to help me with the new accordion feature. The accordion is popping up underneath my photo, to the left of my product description on desktop, and I would like the order to be 1.product title, 2.price, 3.description, 4.accordion, 5.add to cart button. 

 

On mobile view the order is 1.product title, 2.price, 3.add to cart button, 4.description, 5.accordion

 

Let me know if you can help me! I'm desperate lol. I've attached screenshots! Thank you!

Screen Shot 2021-12-01 at 9.20.14 PM.png

Screen Shot 2021-12-01 at 9.20.38 PM.png

Can you share link to product? We can check easier

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
  • 0

@tuanphan thanks for sharing this--most helpful. In the works to recreate an old accordion on a website using the new accordion block but cannot figure out how to replace the +/- with a graphic or a simple css-styled arrow like this: 

border: 8px solid transparent;
border-top: 8px solid #8eaf7d;
border-bottom: 0 none;

(closed and open versions of course)

Any clues to how this may be attempted?

Edited by Gazza
added clarification
Link to comment
  • 0
On 12/14/2021 at 4:26 AM, Gazza said:

@tuanphan thanks for sharing this--most helpful. In the works to recreate an old accordion on a website using the new accordion block but cannot figure out how to replace the +/- with a graphic or a simple css-styled arrow like this: 

border: 8px solid transparent;
border-top: 8px solid #8eaf7d;
border-bottom: 0 none;

(closed and open versions of course)

Any clues to how this may be attempted?

Use this CSS

/* 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;
}

 

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
  • 0

Awesome thread, thanks a lot!

I have a question about anchor links. I was wondering if it was possible to target a specific accordion item with an anchor link AND automatically open the accordion itself.

For the moment I simply managed to target the accordion title, but not to open the accordion itself.

Link to comment
  • 0
9 hours ago, loriskumo said:

I was wondering if it was possible to target a specific accordion item with an anchor link AND automatically open the accordion itself.

I'm not sure if it is possible. Here is the issue. A URL fragment like #mysection knows nothing of if it is hidden inside and area like an accordion.

A solution, if possible, is going to need Javascript which requires the business plan or above. Are you on the business plan or are you willing to upgrade? Don't upgrade now as we don't know if a solution can be found.

In general what the Javascript is going to need to do is when the page is loaded look for a URL fragment. If the fragment is in the page and in an accordion, open the accordion, and try to go to the URL fragment again.

I've done some code detecting URL fragments that changed the scroll a bit. But that is a different beast to what you want to accomplish.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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...