Jump to content

Accordian drop downs in additional information not working

Go to solution Solved by Amaya_SQSP,

Recommended Posts

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
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
  • 2 weeks later...
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

 

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
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
  • 7 months 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.