Jump to content

[Share] Accordion Block: Useful code

Go to solution Solved by Parker_SQSP,

Recommended Posts

 

Hey I just discovered something I hadn't noticed!

2128185645_ScreenShot2022-05-24at8_08_59PM.png.1bac5b433f66d4852d866e5e588a7d87.png

SS was ahead of the curve! Color me red!

So Custom CSS isn't need unless you have some needs the options don't cover.

@DevonHarris 

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 5/24/2022 at 4:29 PM, creedon said:

This may be closer. This is not a solution but an experiment. For it to work the default lines need to be hidden, which you've done already, it appears.

.sqs-block-accordion .accordion-items-container {

  border-top-left-radius : 10px;
  border-top-right-radius : 10px;
  border : solid 2px red;
  padding-left : 1em;
  padding-right : 1em;
  
  }

Let us know how it goes.

Sadly this didn't work either. Both suggestions make a red ring around the accordion instead of just making the actual (blue) corners round. (pic attached)

Interestingly this code makes the top two red corners round and the bottom two not, just like the original code and original problem. 

 

The code that makes the top two edges sharp is this

border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

 

So the code for the bottom two corners is likely similar.

Screen Shot 2022-05-26 at 1.23.19 PM.png

Link to comment
On 5/24/2022 at 11:13 PM, creedon said:

 

Hey I just discovered something I hadn't noticed!

2128185645_ScreenShot2022-05-24at8_08_59PM.png.1bac5b433f66d4852d866e5e588a7d87.png

SS was ahead of the curve! Color me red!

So Custom CSS isn't need unless you have some needs the options don't cover.

@DevonHarris 

Could you explain more how this will help?

I'm looking for the dark blue accordion to have rounded edges. The original code only puts rounded edges on the top left and right, not the bottom left and right.

Apologies for my confusion 🙂

Link to comment
37 minutes ago, JTeich said:

Could you explain more how this will help?

My comment was for those who had used my code to hide lines in the accordion.

Usually when I answer someone directly I include their handle in my post if they aren't the original poster.

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
12 minutes ago, JTeich said:

Apologies.

No worries! 🙂

I may have a solution to your issue.

[enter block id here replacing square brackets] .accordion-items-container {

  border : solid 1px red;
  border-radius : 10px 10px 0 0;
  padding-left : 1.5em;
  padding-right : 1.5em;
  
  }

Adjust to your needs.

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

Hi @tuanphan, what awesome code, thank you!

Is there a way on MOBILE VIEW for an accordion with images, to stack the accordion so that the drop down text comes after each image? Currently, with 3 accordion elements side by side, on mobile the 3 images stack first, then the dropdown menu for all three associated text sections comes after...

So what I'm after for mobile accordion is:
IMAGE
+ drop down text

IMAGE
+ drop down text

IMAGE
+ drop down text

not

IMAGE
IMAGE
IMAGE

text
text
text

Capturey.PNG

Link to comment

Hello @tuanphan  Would you know how to keep the plus icon next to the text even when the text is wrapping?

 

I used whats below which works great until the text wraps

.accordion-item__click-target { width: auto !important;}

 

https://bluebird-ferret-emn3.squarespace.com/          pw: plena

 

@tuanphan The accordions are on the about page

https://bluebird-ferret-emn3.squarespace.com/about

 

 

Screen Shot 2022-06-02 at 5.12.10 PM.png

Edited by junger
Link to comment
21 hours ago, IwanJ said:

Hi @tuanphan, what awesome code, thank you!

Is there a way on MOBILE VIEW for an accordion with images, to stack the accordion so that the drop down text comes after each image? Currently, with 3 accordion elements side by side, on mobile the 3 images stack first, then the dropdown menu for all three associated text sections comes after...

So what I'm after for mobile accordion is:
IMAGE
+ drop down text

IMAGE
+ drop down text

IMAGE
+ drop down text

not

IMAGE
IMAGE
IMAGE

text
text
text

Capturey.PNG

Can you share link to page in screenshot?

Look your screenshot, I think you need to adjust a bit with layout 😆 Similar Map - Text.

6 hours ago, junger said:

Hello @tuanphan  Would you know how to keep the plus icon next to the text even when the text is wrapping?

 

I used whats below which works great until the text wraps

.accordion-item__click-target { width: auto !important;}

 

https://bluebird-ferret-emn3.squarespace.com/          pw: plena

 

 

Screen Shot 2022-06-02 at 5.12.10 PM.png

Which page are you referring to? I don't see accordion on homepage

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 5/26/2022 at 2:20 PM, creedon said:

No worries! 🙂

I may have a solution to your issue.

[enter block id here replacing square brackets] .accordion-items-container {

  border : solid 1px red;
  border-radius : 10px 10px 0 0;
  padding-left : 1.5em;
  padding-right : 1.5em;
  
  }

Adjust to your needs.

Let us know how it goes.

Hello Creedon,

Apologies for the delay in my response. It seems squarespace has an issue where established code blocks disappear, and all that can be done is to wait until squarespace allows the user to access it again.

I've attached another screenshot. It seems this code still puts sharp edges along the bottom red line.

Screen Shot 2022-06-07 at 11.24.04 AM.png

Link to comment

@JTeich

It is hard to help in the abstract.

 

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
3 minutes ago, creedon said:

@JTeich

It is hard to help in the abstract.

 

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.

Good idea. Thanks so much!

https://www.caroline-shenaz-hossein.com/portal-page

Link to comment

@JTeich

I think this is what you want. Replace, make a copy somewhere, the previous attempt at this effect. Place in style tag. Use block design settings to turn off dividers.

/* accordion title color */

.sqs-block-accordion .accordion-item__title-wrapper {

  background-color : #1a252f;
  color : white;
  padding-left : 20px;
  padding-right : 20px;
  
  }

/* make first item round corner */

.sqs-block-accordion .accordion-item:first-child .accordion-item__title-wrapper {

  border-top-left-radius : 10px;
  border-top-right-radius: 10px;
  
  }

.sqs-block-accordion .accordion-item:last-child .accordion-item__title-wrapper {

  border-bottom-left-radius : 10px;
  border-bottom-right-radius: 10px;
  
  }

.sqs-block-accordion .accordion-item[data-is-open="true"]:last-child .accordion-item__title-wrapper {

  border-bottom-left-radius : unset;
  border-bottom-right-radius: unset;
  
  }

.sqs-block-accordion .accordion-item__click-target {

  padding-bottom : 15px !important;
  padding-top : 15px !important;
  
  }

/* accordion content padding */

.sqs-block-accordion .accordion-item__description {

  max-width : unset !important;
  padding : 20px !important;
  
  }

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

Hi — some great options in this thread, thanks to @tuanphan and everyone who's contributed.

However I do need some advice on how to stop the formatting going strange when the text on double columns goes over two lines. Sometimes even swaps the order around and puts second column text down the bottom of the first. Mainly happen on mobile. I don't mind text going over two lines, just want it to align with the top of the left column content to the top of the right column content. Hope that makes sense — I've attached some screenshots below (left correct / right incorrect) (Edit Removed).

Website (Edit Removed). Seems to happen on both desktop or mobile, but mobile is worse as there's lots more 2 rows. 

 

Edited by awd113
Link to comment
On 6/11/2022 at 7:16 PM, awd113 said:

Hi — some great options in this thread, thanks to @tuanphan and everyone who's contributed.

However I do need some advice on how to stop the formatting going strange when the text on double columns goes over two lines. Sometimes even swaps the order around and puts second column text down the bottom of the first. Mainly happen on mobile. I don't mind text going over two lines, just want it to align with the top of the left column content to the top of the right column content. Hope that makes sense — I've attached some screenshots below (left correct / right incorrect).

Website: ka-ra.studio/pal (pw: aUdio5). Seems to happen on both desktop or mobile, but mobile is worse as there's lots more 2 rows. 

Screen Shot 2022-06-11 at 10.13.34 pm.png

I have a solution, but you need to recreate whole accordion.

@creedon do you have an idea to solve this? I tried :after to add some blank content after some paragraph but no luck.


div#block-yui_3_17_2_1_1654757272531_9064 li:nth-child(2) p:nth-child(5):after{
    content: "";
    display: block;
}

 

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 6/7/2022 at 1:01 PM, creedon said:

@JTeich

I think this is what you want. Replace, make a copy somewhere, the previous attempt at this effect. Place in style tag. Use block design settings to turn of dividers.

/* accordion title color */

.sqs-block-accordion .accordion-item__title-wrapper {

  background-color : #1a252f;
  color : white;
  padding-left : 20px;
  padding-right : 20px;
  
  }

/* make first item round corner */

.sqs-block-accordion .accordion-item:first-child .accordion-item__title-wrapper {

  border-top-left-radius : 10px;
  border-top-right-radius: 10px;
  
  }

.sqs-block-accordion .accordion-item:last-child .accordion-item__title-wrapper {

  border-bottom-left-radius : 10px;
  border-bottom-right-radius: 10px;
  
  }

.sqs-block-accordion .accordion-item[data-is-open="true"]:last-child .accordion-item__title-wrapper {

  border-bottom-left-radius : unset;
  border-bottom-right-radius: unset;
  
  }

.sqs-block-accordion .accordion-item__click-target {

  padding-bottom : 15px !important;
  padding-top : 15px !important;
  
  }

/* accordion content padding */

.sqs-block-accordion .accordion-item__description {

  max-width : unset !important;
  padding : 20px !important;
  
  }

Let us know how it goes.

Believe it or not this had no effect on the appearance of the accordion. I've kept it with the code you suggested. The page again is https://www.caroline-shenaz-hossein.com/portal-page

Thank you so much for sticking with me.

Link to comment
2 hours ago, JTeich said:

Believe it or not this had no effect on the appearance of the accordion. I've kept it with the code you suggested.

The code you have installed is different from mine. After removing your code and putting mine in I get the following.

 The lines are there but those can be turned off in the SS options for the accordion. The toggles can be colored but I'd wait until you get the basic effect going before adding that in.

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
10 hours ago, tuanphan said:

do you have an idea to solve this? I tried :after to add some blank content after some paragraph but no luck.

I looked at this but the way the HTML is structured I just didn't see a clean way of getting the desired effect with CSS. It might be possible to restructure the HTML at bit with JavaScript to make it easier to address with CSS but I didn't explore that.

@awd113

 

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
56 minutes ago, creedon said:

The code you have installed is different from mine. After removing your code and putting mine in I get the following.

 

 The lines are there but those can be turned off in the SS options for the accordion. The toggles can be colored but I'd wait until you get the basic effect going before adding that in.

OK! I fumbled around with it, even erasing everything and inserting your code (which broke everything for some reason), Discarded my changes, inserted your code again, and it worked. Perhaps there's other code somewhere that it was dependent on that i deleted. Anyways, thank you so much! I'm going to cut and paste it again just so it's clear to me (and also added back on white arrows instead of the default green).

THANKS AGAIN!

<style>
  /* accordion title color */

.sqs-block-accordion .accordion-item__title-wrapper {

  background-color : #1a252f;
  color : white;
  padding-left : 20px;
  padding-right : 20px;
  
  }

/* make first item round corner */

.sqs-block-accordion .accordion-item:first-child .accordion-item__title-wrapper {

  border-top-left-radius : 10px;
  border-top-right-radius: 10px;
  
  }

.sqs-block-accordion .accordion-item:last-child .accordion-item__title-wrapper {

  border-bottom-left-radius : 10px;
  border-bottom-right-radius: 10px;
  
  }

.sqs-block-accordion .accordion-item[data-is-open="true"]:last-child .accordion-item__title-wrapper {

  border-bottom-left-radius : unset;
  border-bottom-right-radius: unset;
  
  }

.sqs-block-accordion .accordion-item__click-target {

  padding-bottom : 15px !important;
  padding-top : 15px !important;
  
  }

/* accordion content padding */

.sqs-block-accordion .accordion-item__description {

  max-width : unset !important;
  padding : 20px !important;
  
  }

/* accordion arrows color */
.accordion-block .arrow {
    border-color: white !important;
}
</style>
  

 

Link to comment
On 6/13/2022 at 7:02 PM, tuanphan said:

I have a solution, but you need to recreate whole accordion.

@creedon do you have an idea to solve this? I tried :after to add some blank content after some paragraph but no luck.


div#block-yui_3_17_2_1_1654757272531_9064 li:nth-child(2) p:nth-child(5):after{
    content: "";
    display: block;
}

 

Hi @tuanphan and @creedon thanks for the information here. Appreciate your time.

I'm happy to re-build / try another way if you think there's a better option? If not I might have to look into some other accordion options. 

I may be way off here (limited knowledge), but is there anyway to put a html table into the accordion? I have previously used those in Squarespace and they've scaled responsively quite well, but just not sure how to insert one here.

Thanks again.

Link to comment
5 hours ago, awd113 said:

Hi @tuanphan and @creedon thanks for the information here. Appreciate your time.

I'm happy to re-build / try another way if you think there's a better option? If not I might have to look into some other accordion options. 

I may be way off here (limited knowledge), but is there anyway to put a html table into the accordion? I have previously used those in Squarespace and they've scaled responsively quite well, but just not sure how to insert one here.

Thanks again.

This possible. Require a lot of code. Just sent you a private message

Or you can also use Accordion Plugin (paid plugin) to do this

(affiliate link)

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

Thanks for this excellent thread! 

I'm making improvements on a client's website and want to condense their services into an accordion block with images, but the picture isn't filling the screen width and the mobile view isn't containing the image so it's unrecognisable. Is there a quick code fix for this? Can't link the page as I'm editing it unpublished, but have attached a couple of screenshots. Thanks in advance!

Screenshot 2022-06-15 at 12.48.25.png

Screenshot 2022-06-15 at 12.48.16.png

Link to comment
3 hours ago, KerrFerg said:

Thanks for this excellent thread! 

I'm making improvements on a client's website and want to condense their services into an accordion block with images, but the picture isn't filling the screen width and the mobile view isn't containing the image so it's unrecognisable. Is there a quick code fix for this? Can't link the page as I'm editing it unpublished, but have attached a couple of screenshots. Thanks in advance!

Screenshot 2022-06-15 at 12.48.25.png

Screenshot 2022-06-15 at 12.48.16.png

Can you share link to page in screenshot?

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
  • 3 weeks later...

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.