Accordion dropdown in product excerpt

Site URL: https://schneid.org/shop/kaskad-lamp-big-seashell

Hi there, I'm trying to create an accordian dropdown that is placed within the product description using markdowns in the Additional Info (similar to https://schneid.org/shop/kaskad-lamp-big-seashell). I can't seem to get my code pull the dropdown into the description area. Does any one have any ideas how to help solve?

Code in Site Settings, Code Injection: 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Code in Page Header, Code Injection:
<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h2').css('cursor','pointer');
$(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
$(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();});
});
</script>

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

Markdown in Additional Info of Product Block:
## **+ Question 1**
Reply 1
## **+ Question 2**
Reply 2
## **+ QUESTION 3**
Reply 3

Any help would be really appreciated!

50 minutes ago, karen7008 said:

Site URL: https://schneid.org/shop/kaskad-lamp-big-seashell

Hi there, I'm trying to create an accordian dropdown that is placed within the product description using markdowns in the Additional Info (similar to https://schneid.org/shop/kaskad-lamp-big-seashell). I can't seem to get my code pull the dropdown into the description area. Does any one have any ideas how to help solve?

Code in Site Settings, Code Injection: 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Code in Page Header, Code Injection:
<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h2').css('cursor','pointer');
$(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
$(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();});
});
</script>

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

Markdown in Additional Info of Product Block:
## **+ Question 1**
Reply 1
## **+ Question 2**
Reply 2
## **+ QUESTION 3**
Reply 3

Any help would be really appreciated!

Hi , Just checked and it's working on your site as it should, Please try to view the website from private window 🙂

1 hour ago, humxahafeex said:

Hi , Just checked and it's working on your site as it should, Please try to view the website from private window 🙂

Hi there – no, my site is not launched. The quoted site is an example of what I am trying to achieve, but it doesn't work with my posted code...

Have any suggestions?

Try this guide.

5 minutes ago, karen7008 said:

Hi there – no, my site is not launched. The quoted site is an example of what I am trying to achieve, but it doesn't work with my posted code...

Have any suggestions?

Oh Sorry okay , The code is correct and working perfectly fine , Just let me know did you replace #id-of-markdown with the actual id of markdown block? 

1 minute ago, humxahafeex said:

Oh Sorry okay , The code is correct and working perfectly fine , Just let me know did you replace #id-of-markdown with the actual id of markdown block? 

I'm not sure what the name of my markdown id is...do I replace with this?

<script>
var myBlock = $(".markdown-block .sqs-block-content h2").detach();
myBlock.appendTo(".ProductItem-details-excerpt");
</script>

This is where I'm lost...how do I name my markdown ids to call them properly into the script?

2 minutes ago, karen7008 said:

I'm not sure what the name of my markdown id is...do I replace with this?

<script>
var myBlock = $(".markdown-block .sqs-block-content h2").detach();
myBlock.appendTo(".ProductItem-details-excerpt");
</script>

This is where I'm lost...how do I name my markdown ids to call them properly into the script?

No problem , Add this extension to your browser(Chrome)

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Once Installed you will see B icon on top right of browser click on that you will see id's with each block  that what you have to paste in the code with the specific markdown id.  instead of #id-of-markdown

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

12 minutes ago, humxahafeex said:

No problem , Add this extension to your browser(Chrome)

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

 

Once Installed you will see B icon on top right of browser click on that you will see id's with each block  that what you have to paste in the code with the specific markdown id.  instead of #id-of-markdown

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

 

Thank you for this. I have this extension installed already and replaced #id-of-markdown with the name of the block from the extension, but it still does not pull this into the product description. That's why I thought perhaps this was not the way to get the markdown id name...

Hi Karen did you sort this out? I would love to know how!

same here. trying to figure this one out too! anyone able to do it?