[Share] Accordion Block: Useful code

9 hours ago, loriskumo said:

I was wondering if it was possible to target a specific accordion item with an anchor link AND automatically open the accordion itself.

I'm not sure if it is possible. Here is the issue. A URL fragment like #mysection knows nothing of if it is hidden inside and area like an accordion.

A solution, if possible, is going to need Javascript which requires the business plan or above. Are you on the business plan or are you willing to upgrade? Don't upgrade now as we don't know if a solution can be found.

In general what the Javascript is going to need to do is when the page is loaded look for a URL fragment. If the fragment is in the page and in an accordion, open the accordion, and try to go to the URL fragment again.

I've done some code detecting URL fragments that changed the scroll a bit. But that is a different beast to what you want to accomplish.

On 12/16/2021 at 7:12 AM, tuanphan said:

Use this CSS

/* 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;
}

 

Thanks Tuanphan for this. Have not tried it yet but with your reputation I am sure this is what I would need. I will get to this soon but grateful for the CSS. Took me forever to build the accordion just before the SS announcement.

@tuanphan
This information is so great thank you so much! Like the user above @feelingantisocialI am wondering how to make it so the placement of my accordion menu is under or above the add to cart button. I run a small business that sells house plants and would like to display the quick version of the plant care information but don't want it separated into my additional information portion of the page.

As for the design of the menu I was wondering if you had any insight into how to insert icons before the words to indicate the different instructions as shown in the image below. I would also like to divide them by lines to give a sleek but separate look as pictured in the second image which is what I am modeling my menu after.

As for what you said to the last user how do I share a link to my product?

Thanks again!

On 1/6/2022 at 8:51 AM, OperationGreenThumb said:

@tuanphan
This information is so great thank you so much! Like the user above @feelingantisocialI am wondering how to make it so the placement of my accordion menu is under or above the add to cart button. I run a small business that sells house plants and would like to display the quick version of the plant care information but don't want it separated into my additional information portion of the page.

As for the design of the menu I was wondering if you had any insight into how to insert icons before the words to indicate the different instructions as shown in the image below. I would also like to divide them by lines to give a sleek but separate look as pictured in the second image which is what I am modeling my menu after.

As for what you said to the last user how do I share a link to my product?

Thanks again!

You can add Accordion Block in Additional Info, then share link to a product, we will give the code to move it under add to cart button.

See how to find page url.

Thank you so much for this resource! 

Thanks for all this! This is great. Question...

Within the accordion, if I wanted to change a specific words font/size/color, how can I do that? For example, in the picture I attached where it says (FREE), I want to change the font that is within the title. Thanks for all you do! 

2 hours ago, AndrewFreedMusic said:

Thanks for all this! This is great. Question...

 

Within the accordion, if I wanted to change a specific words font/size/color, how can I do that? For example, in the picture I attached where it says (FREE), I want to change the font that is within the title. Thanks for all you do! 

 

Try edit title to this

Quote

LEVEL ZERO <span>FREE</span>

next, add this code to Design > Custom CSS

span.accordion-item__title span {
	color: red !important;
}

On 1/12/2022 at 6:42 PM, tuanphan said:

Try edit title to this

next, add this code to Design > Custom CSS

span.accordion-item__title span {
	color: red !important;
}

 

Hey Tuan! This didn't work 😞

14 hours ago, AndrewFreedMusic said:

Hey Tuan! This didn't work 😞

Can you share link to page where you use accordion & keep above code?

5 hours ago, tuanphan said:

Can you share link to page where you use accordion & keep above code?

The page is not enabled yet but here's what it looked like with a screenshot. 

@tuanphan All this info on accordion blocks is so helpful! How would I go about changing the color of a title on the accordion when that specific title is open and displaying the dropdown content? Currently I have the dropdown content with a background color and opacity filter over it and I have the title background the same color but I cannot figure out how to add the opacity filter to the title when the dropdown is open.  Here is the code I currently have:

.sqs-block-accordion .accordion-item__title-wrapper {background:#f5f3ef;
  padding: 5px 20px;
  margin-bottom: 0px;
  border-radius: 0px;}

.sqs-block-accordion .accordion-item__title-wrapper:hover {filter: opacity(80%);
  padding: 5px 20px;
  margin-bottom: 0px;
  border-radius: 0px;}

//dropdown//
.sqs-block-accordion .accordion-item__dropdown--open {
    background-color: #f5f3ef; padding-left: 30px;}

.sqs-block-accordion .accordion-item__dropdown--open {filter: opacity(80%)
}

.accordion-item__click-target {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

On 1/15/2022 at 2:41 AM, AndrewFreedMusic said:

The page is not enabled yet but here's what it looked like with a screenshot. 

 

Can you share link to page where you added accordion? We can check code easier

On 1/15/2022 at 2:15 PM, ErinTre said:

@tuanphan All this info on accordion blocks is so helpful! How would I go about changing the color of a title on the accordion when that specific title is open and displaying the dropdown content? Currently I have the dropdown content with a background color and opacity filter over it and I have the title background the same color but I cannot figure out how to add the opacity filter to the title when the dropdown is open.  Here is the code I currently have:

.sqs-block-accordion .accordion-item__title-wrapper {background:#f5f3ef;
  padding: 5px 20px;
  margin-bottom: 0px;
  border-radius: 0px;}

.sqs-block-accordion .accordion-item__title-wrapper:hover {filter: opacity(80%);
  padding: 5px 20px;
  margin-bottom: 0px;
  border-radius: 0px;}

//dropdown//
.sqs-block-accordion .accordion-item__dropdown--open {
    background-color: #f5f3ef; padding-left: 30px;}

.sqs-block-accordion .accordion-item__dropdown--open {filter: opacity(80%)
}

.accordion-item__click-target {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

You mean

Change Accordion Title Color when it opens?

Add this CSS

[data-is-open="true"] span.accordion-item__title {
    color: red !important;
}

On 1/15/2022 at 2:41 AM, AndrewFreedMusic said:

The page is not enabled yet but here's what it looked like with a screenshot. 

 

If you can't share url, difficult to give exact code

Try adding this to page Header (Page where you 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 {
    color: red;
}
</style>

Demo: https://tuanphan.squarespace.com/accordion-10-styles?noredirect

Pass: abc

1 hour ago, tuanphan said:

If you can't share url, difficult to give exact code

Try adding this to page Header (Page where you 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 {
    color: red;
}
</style>

Demo: https://tuanphan.squarespace.com/accordion-10-styles?noredirect

Pass: abc

Thanks!!

Woohoo! It worked! The color changed - and I set it to my brand color. The original question was how do I change the font and font size to another site style (in addition to the color). I want the part that says "(FREE)" to be in a different font, not my <h1> font, another one.

13 hours ago, tuanphan said:

13 hours ago, tuanphan said:

You mean

Change Accordion Title Color when it opens?

Add this CSS

[data-is-open="true"] span.accordion-item__title {
    color: red !important;
}

 

I mean change the accordion title background (title-wrapper?) color to have an opacity filter when it is open. 

I included this picture for reference The part outlined in red is what I'm trying to target (only when the dropdown menu is opened).

@tuanphan The accordion block is in place now how do I share a link to my product like you asked?

16 hours ago, OperationGreenThumb said:

@tuanphan The accordion block is in place now how do I share a link to my product like you asked?

See how to find page url

On 1/17/2022 at 12:04 PM, AndrewFreedMusic said:

 

Thanks!!

Woohoo! It worked! The color changed - and I set it to my brand color. The original question was how do I change the font and font size to another site style (in addition to the color). I want the part that says "(FREE)" to be in a different font, not my <h1> font, another one.

edit style code

<style>
span.accordion-item__title span {
    color: red;
  	font-family: monospace;
}
</style>

Site URL: https://matlefflerschulman.com/faq

Is there a way to format the unordered list more precisely via CSS?

IE. Changing text space of the list and the indenting of the 2nd subsequent lines...

Thanks for this code though, really useful stuff!

On 1/19/2022 at 12:18 AM, junomat said:

Site URL: https://matlefflerschulman.com/faq

Is there a way to format the unordered list more precisely via CSS?

IE. Changing text space of the list and the indenting of the 2nd subsequent lines...

Thanks for this code though, really useful stuff!

Hi,

I see a lot of items, which accordion item?

Amazing work Tuan thank you so much for all you do. I was wondering if there is a way to limit the expanded accordion height and make the contents scrollable?

20 hours ago, fathers said:

Amazing work Tuan thank you so much for all you do. I was wondering if there is a way to limit the expanded accordion height and make the contents scrollable?

Hi. Possible.

Use this CSS

div#block-yui_3_17_2_1_1636584655092_3186 .accordion-item__description {
    max-height: 30px;
    overflow-y: scroll;
    overflow-x: hidden;
}

div#block...3186 is accordion block id. 

Use this tool to find block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

On 1/7/2022 at 5:25 PM, tuanphan said:

You can add Accordion Block in Additional Info, then share link to a product, we will give the code to move it under add to cart button.

See how to find page url.

@tuanphan  The url for my page is /shop. Here is the website and password if you want to take a look at it.

www.operationgreenthumb.com

password: greenhouse

On 1/27/2022 at 4:35 AM, OperationGreenThumb said:

@tuanphan  The url for my page is /shop. Here is the website and password if you want to take a look at it.

 

www.operationgreenthumb.com

password: greenhouse

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