[Share] Accordion Block: Useful code

10 hours ago, marcoadrielmunoz said:

#9. Accordion Titles – Add Line Break

I have three seperate accordions on my one page site. The code seems to only work for the first accordion. How might I add this functionality to my other accordions? Thanks!

- Marco

Website: https://antelope-harpsichord-4wpr.squarespace.com

You can try this approach

First, edit accordion title to this

Accordion Item 1  <br/>Red text

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>

@tuanphanhi, im adding an image to the accordion but it now shows in ALL my accordions  - can I add it multiple times but to different accordions throughout my site? How do I specify which one? Thanks! 

4 hours ago, clare1 said:

@tuanphanhi, im adding an image to the accordion but it now shows in ALL my accordions  - can I add it multiple times but to different accordions throughout my site? How do I specify which one? Thanks! 

Can you share link to page where you use accordion + which code did you use?

--

Also, I sent you an email on this.

Hi @tuanphan! This is fantastic info. Wondering if you can help me target a single accordion block to remove the expand icons? I have multiple accordions on the same page, and to keep the look consistent I want to use it for a section list that doesn't require any drop downs. Thanks!

31 minutes ago, thewayfaringdesigner said:

Hi @tuanphan! This is fantastic info. Wondering if you can help me target a single accordion block to remove the expand icons? I have multiple accordions on the same page, and to keep the look consistent I want to use it for a section list that doesn't require any drop downs. Thanks!

In case anyone is looking for this solution I used this CSS: 

section[data-section-id="insert-section-id-here"] .sqs-block-accordion .accordion-icon-container>* {
    display: none;
}

1 hour ago, thewayfaringdesigner said:

In case anyone is looking for this solution I used this CSS: 

section[data-section-id="insert-section-id-here"] .sqs-block-accordion .accordion-icon-container>* {
    display: none;
}

If you have 2 or more accordions on same section, you can target block id.

#accordion-block-id .accordion-icon-container>* {
    display: none;
}

On 5/19/2022 at 1:40 PM, JTeich said:

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!

Replace the paragraph with this:

/* make last item round corner */
li.accordion-item:last-child .accordion-item__title-wrapper {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

hey guys!

My accordion looks great on desktop, but I was hoping to write some code that would change the location of the + icon (here I have replaced the + with an image) to the TOP of the section on mobile.  Any ideas?  See desktop below:

On 8/9/2022 at 12:14 AM, DevonHarris said:

hey guys!

My accordion looks great on desktop, but I was hoping to write some code that would change the location of the + icon (here I have replaced the + with an image) to the TOP of the section on mobile.  Any ideas?  See desktop below:

 

What is page url? We can check easier

8 hours ago, tuanphan said:

What is page url? We can check easier

www.tlastmarks.com/health 🙂. thanks!  I have currently just used an image block, and then accordion, 3 times.  But the spacing is off and I'd rather just use the single block if possible...

10 hours ago, DevonHarris said:

www.tlastmarks.com/health 🙂. thanks!  I have currently just used an image block, and then accordion, 3 times.  But the spacing is off and I'd rather just use the single block if possible...

What is access password?

3 hours ago, tuanphan said:

What is access password?

access PW is: Devon   thanks!

17 hours ago, tuanphan said:

What is access password?

Devon

On 8/11/2022 at 7:20 PM, DevonHarris said:

access PW is: Devon   thanks!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.fe-block-yui_3_17_2_1_1660051489419_107975 {
    grid-column-start: 2;
}
.fe-block-yui_3_17_2_1_1660051489419_107975 * {
   text-align: left !important;
}
}

@tuanphan

Hi! With regard to the below, is there a way to do this to only one page and not across all accordions?
Also, how to shorten the length between where the text ends and where the dividers end / icon (on the right) is?

Thank you!

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

On 8/19/2022 at 3:18 AM, crisisandcreativity said:

@tuanphan

Hi! With regard to the below, is there a way to do this to only one page and not across all accordions?
Also, how to shorten the length between where the text ends and where the dividers end / icon (on the right) is?

Thank you!

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

#1. Add a Code Block under Accordion > Use this code

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

#2. Can you share link to page where you use accordion?

Hi,

 Is there way to center the (+/-) icon. Design only allows left or right alignment. 

Thanks!!

timdranglos you'll likely need to include a link to your page for some proper help.  Also, the PW if you don't have the page set to Public yet. 

On 8/23/2022 at 11:15 AM, timdranglos said:

Hi,

 Is there way to center the (+/-) icon. Design only allows left or right alignment. 

Thanks!!

 

If center arrow, how about accordion title?

8 hours ago, tuanphan said:

If center arrow, how about accordion title?

I figured it out. Just needed to add margin-left px to center it. 

Thanks for looking into it!

- Tim 

Hi @tuanphan

I have use the code from #14 to add an image to the top of my accordion block. 

But the full image isn't show on mobile. 

How can I fix this?

On 8/26/2022 at 12:01 PM, SophieCartwright said:

Hi @tuanphan

I have use the code from #14 to add an image to the top of my accordion block. 

But the full image isn't show on mobile. 

How can I fix this?

Add this code under for mobile

@media screen and (max-width:767px) {
li:nth-child(1) .accordion-item__description:before {
    height: 100px; /* image height */
}
}

You can adjust 100px

On 8/20/2022 at 9:36 PM, tuanphan said:

#1. Add a Code Block under Accordion > Use this code

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

#2. Can you share link to page where you use accordion?

@tuanphan Yes, here it is: https://www.molinarostudio.com/jewelry Thank you!

On 8/20/2022 at 9:36 PM, tuanphan said:

#1. Add a Code Block under Accordion > Use this code

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

#2. Can you share link to page where you use accordion?

Yes, here it is: https://www.molinarostudio.com/jewelry