Jump to content

[Share] Accordion Block: Useful code

Go to solution Solved by Parker_SQSP,

Recommended Posts

Thank you so much!

I have a small issue. The icons I use are now in EVERY accordion block throughout the site. 

How do you target a specific page (my homepage)

https://www.thesoaresprotocol.com/ (the icons also appear in press and projects)

The code I used:

Quote

/* 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://lh3.googleusercontent.com/r_-IMQ7bH3NxSJLZ7x-S3LcdBcSOb9GJx3scBGyM72Ffd2VorGYlghWj76Q8AL22Byk2gruAUeMCFJ7kz7w3vqXet5DRm31jshlhJwFTX8YgMuvAjp0OF9tkRZcuGBvSUeuuNw_YNVHzQhYVeVeTO0mJRiXwzANJ_bPFVJKju6d3e3LYV0g7hRNdBdTRm-nQtIGipdRPP3J_3mqPeQImYyuq4F28aTVYIZiT9tHJkBbk1pRWySnpTRFrZb3hD7MyTuxb_QfKzTI4OESTtP0YTYtisXvCO8t5lnmvL8nHbGiXSf20D1y8VjurqElw5Tiwb4C6QrIPOEV7P5pgf09EZxiB-iGipNKkHEte4R44bxlcbj1QWHtKCXL8CPtIjhrW0-hIAVZPvpyxGzngqLZEhXx5t_-Mrz4QtclB_HJ4EpAWocJbSjPk4rYR3MavNXQ0GU2jghue81KrfCNi9EVWuiq035Ht6gqAag9gn2tzsO2FAxjaLe6ypQFjK7YMRQLjFWMmwr0ROwPhC5metKH1Kpx2miLm76I8NEKAWVrlKu4hss5KkxajRFAPTjiVvljuxDU9uVvsBl7M3UhR-XAYG0KPWCHs99ABfEgN5f9NKEi1jUAu6QQrDT9kq3OqNnyjHNkn9iIynIZ8BfrfvE2mbEUm3lBhKpTbBFh5c19KqaZQx2pHX4XUaROoTlPyFV9k685r_N4cW2S71buMGPwi2gp0Rw=s512-no?authuser=1);
}
li.accordion-item:nth-child(2) .accordion-item__title:before {
    background-image: url(https://lh3.googleusercontent.com/_lsgDhGpRDjUWOVFElBP7oMy1BgUdvO9pBg4De4NNjEkC8KggKOCZVu4gTX5pGbqQDhJJjn8pbBykUep4kqx9YH6oFViIDOhQbypYfwyuRPHDCjVNuhHCf7t_vySojoJw71rbJz3I5KwOOgAVtvEsySO4OxeN23pCmKAXj-GNlupSQLWOMjsdeFJPtb8hRjbdHkh2WeRz5Qwv-3yzZKXC4dd6CWGSeSw6uUiMMasMp4za-xLedNDRdJ5P1Pf_IwtasbZofTWCLrLBCrN0FG-SWlcAhK_5i2FZLFvtA8eV8EXZS6Hm0Q1DGU_pTCgdPrzrplQ7TtwbMzJZMbVqgUtfKKhZLNTerYjqcJLzSVo34t4ftc2GUOqfSHkY4UnPIOaVP13uoqg7ct9uwX6EF6PWa8Jmkl4-BhFyAzRJ7XyZcVdE2O4POd0_708oSMAsdC2fVB6zBsGaTn6vFGNK11KDOyFHCbsc7FywtD1a_K-99w1jidTBktBJWrmauU-zoNNx3KacbKKSMFy3__UIWqkljDfAwnBZyEFXWwGRf_JBMe6BDrMDJ4gY4ujeLYSXASyZKutc2LdC-KUDORr3jX0G4eAYHjN7qA0s9jTaj28ZjSG5uhRmqPOCwFYxM3wyycvFv4Ciifqz1NE7pOt0bqMtOWtnwi64yjn7sXqAg0SKNK51DHhQxquBQe5SUoLWZgYoGPpeQbc3n6QHVg1p6jjcbqqmQ=s512-no?authuser=1);
}
li.accordion-item:nth-child(3) .accordion-item__title:before {
    background-image: url(https://lh3.googleusercontent.com/MKA2ni9HX8MqtnAbaOq5CtaU6Tco5T5OZ8GqCbxZrLHm4alq-es2CZOa7xb7HoWysmnEXu9ijKk5Y00H7V6z1xeP_9IzjbxzTt3Ttmrc7fVnnNCRZQkdvl-4mTV2YxHXOJ7oX-6bpBiGoEnEvUwbiiYp-phCSGKXNC0oNCcK5-_1m2lHldBDvTqtHDvihAID9iDlCalRV0xDDNUxott9DERc9iUc6sLu1M-5NAW5TEFVsXRbWJgvW4s1wRqoQ7dlAdKZrSREKR-H-k6Km55dBXsHOIOK7eNolH1RnhqkIoYNkXvKt3EwE9kLUBcQTV9inpaalJK8FVBdnKNrcpYIxr70hb6PoD7e5IdW2yLBlUdHOeu8S1dE9k2AMuu19ptTdxht3zDVHAE0Ph8SEJVE24kb3-8oIveY_t8jHzwYEVmgU8w9ST55QSdM7v5z9NpIjmDdLOr6nOzgB6f2NbwVTbkLmGhfUctKo91CKsKSmlNXy3M8-NL8sjQkhtw4kVP1ZuA3PO5TzDCKxRMKQblYGSLn2Lr3-8eSqCqyLWVhOd11HmTRdscmCZUDassKfyPXx2stNSdnNX0LNLz_pYl9B97VmaiQGVF_RqO6McxoUTmqWpg6XIi0_KttwWTN_xmPGmmJ83-RmGvPx2PT-IQs3eqqGxJN8cxo3Qtwca9sDfUcPP9PlWBXccHYIjqwvXH71kj1aVVajy4WfUo5klCnJONSqw=s512-no?authuser=1);
}
li.accordion-item:nth-child(4) .accordion-item__title:before {
    background-image: url(https://lh3.googleusercontent.com/dXtSZjh8-qVIouVXD1E1DRy_4xn-dF41VXnRwYJ9uRlFu-Fu5E2bGpESiON0r0_tRYk3cpCR_SAUzrFrH0EJEgkBxIBWEcrDENFEmxkrLJ_ZcHJIHusYrmmDe17fX64PvrkKjFT5OpmeFY9qZKy5frSLTif43L-D707rBnmSpQ1__E4K62lqfbuU0n5d5rJUouPwO5zyLrGHwN2T5bsF1aVxuv3DU6qCPCqnT5ydN923xLQjvQa40TfrWSHggKOu_MJ0I7qilkjl5zBuGAyXcdFVKT3ijyMSOkr3WW40ed_vhKpzk03mOMdiSxBesUxT26mcKnZF1UXCF_bv5FvXwAiPbfHLEd3I_K9cBRYp5jT496fGfR-fJw7OYnHo0xPwLyzL7ISMyJSoJd-usMRB2O4rRiHAICjFPcMyMQNmHDR55ykQKiVS5wXpxMAPCQDz7VSUmARZPzyJjIse-Zti7dwjpEsRCRIlQ9XiFcKhsZSAbLGPe0iAJZ0hNhvk9kT-D3yMPUE02FS7jU-ifBpqgFvLILGHoaoN8Kvz9XHTuqyNvCSZWsotshL6ANM1JQu5XU9QRSzF0Axeyj8YTJ9cXdutKjvnyGZr5JfhyVE8hJl0-RaAliz7bjkoFpt3IEc2vL7NQE-X8uj0v2vyKwJoHvUxZuCPPYu7KKK-0ood7KHd4nB_BBy7hrF1nPpQk5q5XDKwbi7y6dvzZTwMNrWkkyZ5Lg=s512-no?authuser=1);
}

Thank you.

Link to comment
3 hours ago, A1Protocol said:

The icons I use are now in EVERY accordion block throughout the site. 

You can add the homepage class to the beginning of your rulessets.

.homepage li.accordion-item .accordion-item__title:before {

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Great work as always!

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
14 minutes ago, Beggars said:

when it expands, the background stretches.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@Beggars

I don't think you're going to get a satisfactory effect using the section background image feature. It's not setup to handle repeating an image so it basically is cropping or stretching the image as you've seen.

Please see Page Section Background Image Repeat which may work for your need.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
8 hours ago, riri said:

Hi @tuanphan thank you for this it's so helpful 🙏

In the unordered list, is it possible to indent the second line of text so that it aligns with the first line?

Screen Shot 2022-02-17 at 10.38.02 PM.png

I think I solved a similar case in previous pages. 

Can you share link to page in screenshot? We will try checking it again

Edited by tuanphan

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/28/2022 at 12:25 AM, tuanphan said:

Can you share link to product where you added accordion? Thank you

 

On 1/28/2022 at 12:25 AM, tuanphan said:

Can you share link to product where you added accordion? Thank you

I looked at the link you sent and when I go to find the URL slug on my shop all I get is /shop (image attached).

I don't know how to give the URL of the exact page how do I do that?

SQUARESPACE FORUM QUESTION.PNG

Link to comment
  • 2 weeks later...
On 3/4/2022 at 3:30 PM, designssllc said:

Can you rotate an accordion block and have it open out to the side?

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.

1218005620_ScreenShot2022-03-06at10_43_02AM.png.e71d1565699b97268ca022c6b76f83cc.png

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 11/8/2021 at 3:47 PM, 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

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

Is there a way to change all my accordion font size? I have accordions for all of my products and they are all set to Heading 3, I want them to be normal. Do I have to change it on every product?

Link to comment
On 3/9/2022 at 12:27 PM, ErinO said:

Is there a way to change all my accordion font size? I have accordions for all of my products and they are all set to Heading 3, I want them to be normal. Do I have to change it on every product?

Possible with a code. You mean Accordion Title or Accordion Content?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
11 hours ago, afinta said:

Is there any way to style one word in an accordion title? 

Possible. I just coded this a few days ago. See a demo: https://thung.squarespace.com/accordion?noredirect (Pass: abc)

First, edit Accordion Title to this

Accordion Item 1  <span style="color:red;">Red text</span>

red-text.thumb.png.9fa69a18680c5d2d4e1a825b66b306c0.png

Next, add this code into Page Header (Page where you added accordion)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("span.accordion-item__title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
5 hours ago, samantha4 said:

@tuanphan Thank you for creating all this code! I am using #9 (accordion titles - add line break). Because I have added a few sentences I no longer like where the icon sits. Is there a way to align it to the top of bottom of the container?

You can view my site here: https://thegreeneschool.squarespace.com/vision-mission

password: letstalk

To align plus to top. Add this to Page Header (page Where you added Accordion)

<style>
  button.accordion-item__click-target {
    align-items: baseline !important;
}
</style>

 

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

#9 (Update)

If you use a Business Plan or higher, you can use this approach.

First, add to Page Header (Page where you will use accordion)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("span.accordion-item__title").each(function(){
    $(this).html($(this).text());
  });
});
</script>
<style>
span.accordion-item__title span {
display: block;
}
</style>

Next, edit Accordion Title, use this format

Patrick Trojer, PhD <span>President & Chief Executive Officer</span>

pan.thumb.png.37e3c8bfe6c80230bbe694ac7c011621.png

result

result.png.37e0bdcbf9cc777e4691c9b2c77038ea.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.