[Share] Accordion Block: Useful code

On 4/20/2022 at 8:11 PM, 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!

@nikkib did you ever figure this out?

On 11/8/2023 at 3:02 AM, hey_TK said:

@nikkib did you ever figure this out?

If you share link to page where you have problem, we can help easier

On 11/6/2023 at 1:45 AM, tuanphan said:

The parent container has a limit 30px x 30px width + height

You can add code to increase this

.sqs-block-accordion .accordion-icon-container {
    width: 300px !important;
    height: 300px !important;
}

then change background size to contain is enough

:not([data-is-open="true"]) .plus {
    background-image: url(https://images.squarespace-cdn.com/content/5e2868d5cfb9407f12460366/ef8e49c5-d627-4702-a11e-59858a99f715/More+Info+Wit+Arrow+Image.png?content-type=image%2Fpng) !important;
    background-size: contain;
    background-repeat: no-repeat
}

 

That's perfect - Thanks again @Tuanphan

Update code: Add image to accordion

@onika with your problem, try #14.2 or #14.3, you can add image easier

@tuanphan Thank you, could you send me the link again to your accordion post and I will have look at 14.2 and 14.3?

13 minutes ago, onika said:

@tuanphan Thank you, could you send me the link again to your accordion post and I will have look at 14.2 and 14.3?

Code in First Page.

@tuanphan found it, thank you very much. I tried #14.2, but for some reason it does not show the photo. Is there anything I am missing?

https://issylux.squarespace.com/fenster-sonnenschutz
PW: test1234

First accordion block

Thank you

@tuanphan just tried again and now it is working. Is there any chance to reduce the image size?

@tuanphan the photos also do not display correctly on mobile is there a way to adjust them for different screen sizes as well.

So basically I need to upload the photos in the CSS and then need copy and past the https for each photo is that correct?

30 minutes ago, onika said:

@tuanphan just tried again and now it is working. Is there any chance to reduce the image size?

Use this code to Custom CSS box

div.accordion-block img {
    max-width: 500px;
}

code will affect all images inside accordion

with mobile, use this CSS

@media screen and (max-width:767px) {
div.accordion-block img {
    max-width: 300px;
}
}

(You can use width or max-width, similar)

Hi there, I'm having an accordion issue with using multiple accordions

Do you think you'd be able to check it out and give me any advice please:

Website link is indigo-salamander-t2yy.squarespace.com

On 1/3/2024 at 4:46 AM, armni said:

Hi there, I'm having an accordion issue with using multiple accordions

Do you think you'd be able to check it out and give me any advice please:

Website link is indigo-salamander-t2yy.squarespace.com

It is a bug, you can consider using Accordion Block in Classic Editor, I can give you code to add background color for accordion

12 hours ago, tuanphan said:

It is a bug, you can consider using Accordion Block in Classic Editor, I can give you code to add background color for accordion

Ah ok so theres no code to get around it?

If so yes thats fine thank you!

Thank you so much, @tuanphan , for this incredible resource (and for ALL that you contribute to this community...I've benefitted tremendously from your, @creedon's, and @Beyondspace's generosity and expertise)!

I've read through this thread in full and have also searched the forum, but haven't seen a solution to the following (likely because it's a bit of an odd request 😊).

If possible, I'd like to set up one of my accordions so that the second item OPENS when/if the user closes the open-by-default first accordion item, the first item reopens if the user closes the second item, and both items can be open at the same time. So to put it another way, I'd the two-item accordion to be set to always have at least one item open, with the first item open by default.

I know I can use the built-in SS features to set the first item as open and to allow multiple items to be open at the same time (it's set like this now). I tried to fiddle with code you'd provided in this thread to see if I could add this desired result but I had no luck.

Page URL: https://www.radicalhealing.ca/therapeuticapproach

Password: RH2024!

(The accordion in question is #block-877d191977aa373aa088, next to the 'RELATIONAL' heading.) 

@cat_not_kitty You mean

Initial: Open first item

When clicking First item (to close first) >> Open Second Item

When Close second item >> Open First Item?

Hi Tuan,

Yes, that's it exactly! And also (in case this is relevant to the logic of the final code) to allow both to be open at the same time.

On 1/13/2024 at 2:21 AM, cat_not_kitty said:

Hi Tuan,

Yes, that's it exactly! And also (in case this is relevant to the logic of the final code) to allow both to be open at the same time.

You can disable this option in Accordion Block: set the first item as open

Then I will give code to achieve your request

and do this for first Accordion or all three accordions?

https://www.radicalhealing.ca/therapeuticapproach

I've gone ahead and disabled the 'Expand first item' option in the Accordion Block Edit>Design area.

Just the first accordion, the one next to the 'RELATIONAL' heading!

On 1/15/2024 at 1:42 PM, cat_not_kitty said:

I've gone ahead and disabled the 'Expand first item' option in the Accordion Block Edit>Design area.

Just the first accordion, the one next to the 'RELATIONAL' heading!

It looks complex than I thought. I still test the code

I will let you know soon

13 hours ago, tuanphan said:

It looks complex than I thought. I still test the code

I will let you know soon

Thank you so much for checking back in and spending the time to work this request out, tuanphan! I really appreciate it.

Hi! I'm wondering if there is any way to hyperlink the title of an accordion? 🙂 Thanks! 

On 1/23/2024 at 11:13 PM, madeleineluisearena said:

Hi! I'm wondering if there is any way to hyperlink the title of an accordion? 🙂 Thanks! 

First, add a tag to Accordion Title, something like this

<a href="https://google.com">Accordion Item 1</a>

Next, use this code to Website > Website Tools > Code Injection > Footer

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

Hi everyone, 
How can we pull the post content inside an accordion? 
Post title as an accordion title and post content as accordion item description. Can it be done with jquery/ javascript?
 

On 1/31/2024 at 11:49 AM, yubrajs said:

Hi everyone, 
How can we pull the post content inside an accordion? 
Post title as an accordion title and post content as accordion item description. Can it be done with jquery/ javascript?
 

No, you will need to use a custom plugin

You can use This tab plugin (affiliate link) or this link (non-affiliate link), it has an option to pull title/description from a Blog Page (or Portfolio Page).