Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Accordian drop downs in additional information not working


Peter550

Question

Posted (edited)

hi @tuanphan

 

I want these markdowns to be accordion drop-downs in the additional information section. I have added the code into the code injection (see screenshot and below) following this guide - https://stnsvn.com/blog/how-to-add-an-accordion-to-squarespace and use markdowns for the sections. But its not working. I cant click on the + signs and they do not hide the text below. They are visible like in the screenshot all the time. 

 

Any idea how to resolve this? 

 

/*Accordion Page Settings*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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();});
});
$(document).ready(function(){
$('.markdown-block .sqs-block-content h2').click(function()
{$(this).toggleClass('plus-minus');});
});
</script>

 

 

Screen Shot 2021-05-19 at 22.09.59.png

Edited by Peter550
Link to comment

11 answers to this question

Recommended Posts

  • 0
7 minutes ago, Peter550 said:

Site URL: https://www.saccostyle.com/

hi @tuanphan

 

I want these markdowns to be accordion drop-downs in the additional information section. I have added the code into the code injection (see screenshot and below) following this guide - https://stnsvn.com/blog/how-to-add-an-accordion-to-squarespace and use markdowns for the sections. But its not working. I cant click on the + signs and they do not hide the text below. They are visible like in the screenshot all the time. 

 

Any idea how to resolve this? 

 


/*Accordion Page Settings*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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();});
});
$(document).ready(function(){
$('.markdown-block .sqs-block-content h2').click(function()
{$(this).toggleClass('plus-minus');});
});
</script>

 

 

Screen Shot 2021-05-19 at 22.09.59.png

Hi, i review your website and it seems like you are using h3 for the accordion. simply replace the h2 to h3 into JavaScript code and it will works.

Link to comment
  • 0
Posted (edited)
On 5/20/2021 at 8:11 AM, Peter550 said:

Legend! Thank you. 

 

Can you help spread out the accordions so they cover the full width of the line below? 

 

 

Hi @Peter550 

Thanks for raising the questions, it has been very helpful reading your posts as I was following the same site for the accordion and having issues.

I would also like to spread the accordions into columns, would you mind sharing the code you used to create the columns? 

Thanks Tracy

Edited by tracydickason
Link to comment
  • 0

 

Hi @Agha_Waqas,

I've followed your help that you have given Peter and I was wondering if you could give me a hand with the accordion code. 

The +- is not showing up for me for some reason. I would also like to be able to spread the questions over columns, would you be able to help me with this? 

I've added a screen shot of the code as well as the page as the resulting page. 

Thanks so much. 

Tracy

Accordion_2021-05-31_10-05-22.jpg

Link to comment
  • 0
21 hours ago, tracydickason said:

 

Hi @Agha_Waqas,

I've followed your help that you have given Peter and I was wondering if you could give me a hand with the accordion code. 

The +- is not showing up for me for some reason. I would also like to be able to spread the questions over columns, would you be able to help me with this? 

I've added a screen shot of the code as well as the page as the resulting page. 

Thanks so much. 

Tracy

Accordion_2021-05-31_10-05-22.jpg

Hi Tracy, Will you please share the website link?

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...