Insert Dropdown Accordion in Product Description

Hi guys, I'm a complete newbie and managed to add customisation to my website thanks to the community. I'm stuck here! I would like to have a dropdown accordion - I'm using markdowns to create them - between  ProductItem-details-excerpt and product-quantity-input similar to https://schneid.org/shop/kaskad-lamp-big-seashell. can anyone recommend custom code? thanks Laurent

In case someone is interested, I have found a solution. 

In the product Additional Info tab, create your markdown. Then add the following script in the advanced setting code injection:

<script>
var myBlock = $("#id-of-markdown").detach();
myBlock.appendTo(".ProductItem-details-excerpt");
</script>

@BelBarStudio this is the exact thing i'm looking for! but it's saying there's a syntax error on the line including the opening "<script>". could you double check that for me? is it enclosed in another div or something?

I tried this too. didn't get syntax errors but couldn't get it to work either.

Hi,

here are more detail of how I'm using it. @fucci ids starting with #yui... are dynamic and always change so you cannot use them as a reference. You need to use ids starting with #block.

for a start I have used the code from silvabokis using markdown for the accordion feature. I only use markdowns for accordion and I use a brine template.

You create the accordion in the Additional Info of your product. 

The code below insert the accordion after the product description, you can add the script in the footer in the code injection section. 

<script>
$(document).ready(function (){

var myBlock = $(".sqs-block-markdown").detach();

myBlock.appendTo(".ProductItem-details-excerpt");

})
</script>

Laurent

On 6/23/2020 at 11:08 AM, BelBarStudio said:

Hi,

 

here are more detail of how I'm using it. @fucci ids starting with #yui... are dynamic and always change so you cannot use them as a reference. You need to use ids starting with #block.

for a start I have used the code from silvabokis using markdown for the accordion feature. I only use markdowns for accordion and I use a brine template.

You create the accordion in the Additional Info of your product. 

The code below insert the accordion after the product description, you can add the script in the footer in the code injection section. 

<script>
$(document).ready(function (){

var myBlock = $(".sqs-block-markdown").detach();

myBlock.appendTo(".ProductItem-details-excerpt");

})
</script>

Laurent

Hi @BelBarStudio. I'm trying to follow your instructions but when I go to SilvaBokis' site I don't see any mention of the accordion feature. Do you happen to have the markdown that I need to paste in my "additional information" portion of my product page? Thank you. 

hi here is the full link for the code https://www.silvabokis.com/squarespace-tips/how-to-create-hideshow-faqs-in-squarespace