[Share] Accordion Block: Useful code

@tuanphan thanks SO much for this excellent post! 

I have a related question that's probably a very basic CSS tweak for the Accordion Block, but I'm not sure how to do it. I'd like to reduce the indentation/padding on right margin of the expanded "DESCRIPTION" text.

I notice "TITLE" text will flow to the same right and left margins as an ordinary block of text above/below the Accordion on a section, but the expanded DESCRIPTION is always highly indented along the right margin.

I'll attach an example of what I'm talking about, and any thoughts on a few lines of CSS to fix this would be warmly appreciated!

Here's a plain text block and short TITLE in the Accordion block, with the expanded DESCRIPTION text below.

Here's a long TITLE in the Accordion block with the expanded DESCRIPTION text below. The TITLE flows out fully to the far right margin (just like a normal text block in the example above), but the expanded DESCRIPTION is very indented on the right margin:

On 3/27/2022 at 9:53 AM, PracticalDesigner said:

@tuanphan thanks SO much for this excellent post! 

I have a related question that's probably a very basic CSS tweak for the Accordion Block, but I'm not sure how to do it. I'd like to reduce the indentation/padding on right margin of the expanded "DESCRIPTION" text.

I notice "TITLE" text will flow to the same right and left margins as an ordinary block of text above/below the Accordion on a section, but the expanded DESCRIPTION is always highly indented along the right margin.

I'll attach an example of what I'm talking about, and any thoughts on a few lines of CSS to fix this would be warmly appreciated!

Here's a plain text block and short TITLE in the Accordion block, with the expanded DESCRIPTION text below.

 

Here's a long TITLE in the Accordion block with the expanded DESCRIPTION text below. The TITLE flows out fully to the far right margin (just like a normal text block in the example above), but the expanded DESCRIPTION is very indented on the right margin:

 

Accordion Content has  a 300px max width

You can add this to Design > Custom CSS to remove it

/* accordion content fullwidth */
.accordion-item__description {
    max-width: 100% !important;
}

I need to change the color of the link inside of accordion text. how do I do it please?

On 4/7/2022 at 5:38 PM, Gabrielesea said:

I need to change the color of the link inside of accordion text. how do I do it please?

Use this CSS

/* accordion links */
.accordion-item__description a {
	color: #f1f !important;
}

22 hours ago, tuanphan said:

Use this CSS

/* accordion links */
.accordion-item__description a {
	color: #f1f !important;
}

 

Thank you so so much! It saved me big time! 

Is there a way to have a link that jumps to particular portions of accordion? For example I have a gallery of images that I each want to have a unique link that takes you to a certain section of the accordion (accordion is on its own page)

@tuanphan 

**DISREGARD - there's a current issue with CSS changes showing in real-time at the time of this question - it works!**

I tried this and it didn't work - any suggestions?  

/* Links underline */
div.accordion-item__description p a {
    border-bottom: 1px solid black;
}

On 2/17/2022 at 6:45 PM, 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?

@tuanphan This question has been asked a couple times, but I don't see the answer anywhere. Is it possible to indent all lines except the first so that everything lines up nicely? I'm trying to do this in the second item of the accordion ("Key Terms") on this page: https://www.woventeaching.org/r2p-rwanda (password: help). Thank you!

On 4/21/2022 at 7:11 AM, nikkib said:

@tuanphan This question has been asked a couple times, but I don't see the answer anywhere. Is it possible to indent all lines except the first so that everything lines up nicely? I'm trying to do this in the second item of the accordion ("Key Terms") on this page: https://www.woventeaching.org/r2p-rwanda (password: help). Thank you!

I remember I answered this problem for 2 members.

Add to Design > Custom CSS

/* Key Terms */
/* Accordion Block - Text indent */
div#block-yui_3_17_2_1_1648852999904_10430 li:nth-child(2) p {
    display: flex;
    text-indent: -10px;
    margin-left: 10px;
}

On 4/19/2022 at 8:10 PM, Tanna said:

@tuanphan 

**DISREGARD - there's a current issue with CSS changes showing in real-time at the time of this question - it works!**

I tried this and it didn't work - any suggestions?  

/* Links underline */
div.accordion-item__description p a {
    border-bottom: 1px solid black;
}

Did you solve or still need help?

On 4/19/2022 at 12:45 AM, Homeward said:

Is there a way to have a link that jumps to particular portions of accordion? For example I have a gallery of images that I each want to have a unique link that takes you to a certain section of the accordion (accordion is on its own page)

Hi. Not possible

thank you for this - is there a way to change the background color opacity but leave the text 100% visible?

2 hours ago, pinkchoux said:

thank you for this - is there a way to change the background color opacity but leave the text 100% visible?

For accordion content or accordion title?

On 2/10/2022 at 1:37 PM, creedon said:

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.

Are there other classes I can use to style a specific accordion? I have 4+ accordions on my homepage and only want to style one of them. Thanks!

9 minutes ago, alexrest said:

Are there other classes I can use to style a specific accordion?

Yes. Replace the .homepage class with the block id of the accordion.

You can find the block id using Heather Tovey's most excellent looking Squarespace ID Finder.

hey @tuanphan - great codes thanks!  I have subtitles on my accordion, and also a picture, but the picture only aligns with the main title, not the subtitle too.  Is there any way to do that?  And still have the + icon on the right?  https://www.tlastmarks.com/health.  thanks!!

Kindof like this:

On 5/16/2022 at 2:01 PM, DevonHarris said:

hey @tuanphan - great codes thanks!  I have subtitles on my accordion, and also a picture, but the picture only aligns with the main title, not the subtitle too.  Is there any way to do that?  And still have the + icon on the right?  https://www.tlastmarks.com/health.  thanks!!

 

Kindof like this:

 

 

@creedon @bangank36 any ideas?  I'm also looking to remove the accordion divider on only the top and bottom

6 hours ago, DevonHarris said:

I'm also looking to remove the accordion divider on only the top and bottom

Please see Accordion Block Top Bottom Border Hide.

Let us know how it goes.

1 hour ago, creedon said:

Please see Accordion Block Top Bottom Border Hide.

Let us know how it goes.

@creedon this is amazing!!  Thank you so much! 

Thank you so so much!

Silly question, but how do i make all four corner rounded. The code says 

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

but that obviously isn't it

Thanks again!

20 minutes ago, JTeich said:

how do i make all four corner rounded

If you are talking about the border at the top and bottom of each accordion item. Those are created with a background color on a 1px high div. They are not borders created with the CSS border property.

8 hours ago, creedon said:

If you are talking about the border at the top and bottom of each accordion item. Those are created with a background color on a 1px high div. They are not borders created with the CSS border property.

No, i'm not talking about each item, i'm talking about the entire accordion having rounded edges.

Thanks

8 hours ago, JTeich said:

how do i make all four corner rounded.

Try the following.

.sqs-block-accordion {

  border-radius : 10px;
  border : solid 2px red;
  
  }

Let us know how it goes.

On 5/19/2022 at 10:46 PM, creedon said:

Try the following.

.sqs-block-accordion {

  border-radius : 10px;
  border : solid 2px red;
  
  }

Let us know how it goes.

Hello,

Sadly this is not what i'm looking for. This is what the above code does.

I'm simply looking for rounded edges on the accordion - for all four edges to look like the top two edges of the original code.

If this was a misunderstanding and you know how please let me know, if not, thanks anyways!

8 hours ago, JTeich said:

Sadly this is not what i'm looking for.

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.