Accordian drop downs in additional information not working

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>

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>

 

 

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.

Legend! Thank you. 

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

8 minutes ago, Peter550 said:

Legend! Thank you. 

 

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

 

 

I think you already fix it. now accordions show into 4 columns 

Also, if I were to change the accordions to a paragraph font, what would I change the code to? 

I would like them to reach the end of the line below - ie. They span the full width

I imagine its something to do with padding that I can channge with custom CSS? 

@tuanphan

13 minutes ago, Peter550 said:

Also, if I were to change the accordions to a paragraph font, what would I change the code to? 

if you want to change the font size of the accordion heading. add below code
.markdown-block h4 {
font-size: calc(1 * 1rem) !important;
}

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

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

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

Hi Tracy, Will you please share the website link?

Hi @Agha_Waqas

It is still in it's early stages but the link is: https://oriole-sapphire-2pbm.squarespace.com/config/pages

Thanks so much for having a look. 

Tracy

@tracydickason

Please post your site-wide password.

We can then take a look at your issue.