Jump to content

Accordion dropdown in product excerpt

Recommended Posts

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!

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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 🙂

Link to comment
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?

Link to comment
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? 

Edited by humxahafeex
Link to comment
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?

Link to comment
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>

 

Link to comment
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...

Screen Shot 2020-03-21 at 11.26.29 AM.png

Screen Shot 2020-03-21 at 11.26.57 AM.png

Link to comment
  • 1 month later...
  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.