issue with markdown HTML

Site URL: http://rachelthor.com/

Hi there, I've been following the squarespace forum for adding code that allows me to create drop-down menus where only the heading is visible until you click it, then it toggles open to a longer explanation (often used for FAQs). This successfully worked for me on the last page I created on my site. This time around however, I'm trying to use the same code and it's weirding out on me. Working the first time I load a preview and then staying forever open after that, or continuously bouncing between open and closed. I am wondering if I have the code doubled somewhere and it's confusing itself, or what suggestions you have for clearing house and starting over to get this working across my whole site? 

Which code did you use?

the most recent one I've tried is:

<script>
var arrState=[];

(function() {
 var arrAnswerBlocks=document.getElementsByClassName('answer');

 for (var i=0;i<arrAnswerBlocks.length;i++) {
   var element = arrAnswerBlocks;
   var state = {id:(element.id), collapsed:true}; 
   arrState.push(state); 
 }

})();

function expand(id) {
 var state={};
 var answerBlock=document.getElementById(id);

 for (var n=0;n<arrState.length;n++) {
   state=arrState[n];

   if (state.id==id) {
     if (state.collapsed) {
       answerBlock.style.display="block";
       state.collapsed=false; }
     else {
       answerBlock.style.display="none";
       state.collapsed=true;
     } //end if
   }//end if

 }// end for
}
</script>

I haven't used that code yet. 

You can also try this guide. I just wrote a few minutes ago.

I tried your new code, it's great. there's only one issue. Right now, any h4 header i click, it will open that one plus any headers underneath it (instead of just that one header). can you update your code to take care of that? thank you!

22 hours ago, rachelthor11 said:

I tried your new code, it's great. there's only one issue. Right now, any h4 header i click, it will open that one plus any headers underneath it (instead of just that one header). can you update your code to take care of that? thank you!

Hi, Can you share link to the page on your site? I will check.

yes www.rachelthor.com/portals

4 hours ago, rachelthor11 said:

yes www.rachelthor.com/portals

Hi

I updated code in the guide.

I very much appreciate your work on this. However after updating this in the "code injection" of my home page advanced settings,  it still has a glitch.

It will open every toggle underneath the heading I am clicking on, not just that heading. Is that possible to adjust in the code so it only opens the current heading I am clicking on?

3 hours ago, rachelthor11 said:

I very much appreciate your work on this. However after updating this in the "code injection" of my home page advanced settings,  it still has a glitch.

It will open every toggle underneath the heading I am clicking on, not just that heading. Is that possible to adjust in the code so it only opens the current heading I am clicking on?

Hi,

Did you read this?

You need to wrap all the content of each accordion in the blockquote to make the code work properly.

See blockquote syntax: https://support.squarespace.com/hc/en-us/articles/206543587

Hi there. I don't know what that means. Can you explain? Currently I've tried these things so far:

1. inject the code into the home page advanced code injection site. (result: every text block below and including clicked text block opens.)

2. Inject the code into the home page and each page with an accordion. (result: no text blocks will open when clicked.)

3. inject the code into the home page, as well as at the top of each individual markdown box. (result: same as #1).

4. only put code into markdown boxes, no code-injections. (result: same as #1.)

(www.rachelthor.com/portals)

Are one of these what you mean by your answer? Can you elucidate? Thank you for your continued support! I am looking forward to having this solved!

Warmly,

Rachel

Hi. Have you solved yet?

Hi @tuanphan this saved my day. Thank you it worked very well. 

I changed the background colour and line.

I have tried so many different codes for this, yours worked. See attached with the accordian closed and open.

Thanks.

On 4/27/2020 at 10:04 AM, TDavy said:

Hi @tuanphan this saved my day. Thank you it worked very well. 

I changed the background colour and line.

I have tried so many different codes for this, yours worked. See attached with the accordian closed and open.

Thanks.

 

 

(y)

Let me know if you have any other questions.

Also, with accordion, you can use an Accordion Block. SS released it a few months ago.

Hi, I am struggling to get this to work on my site too, if I can have some help that would be awesome.

The site is https://magnolia-mandolin-k3fs.squarespace.com/ I have been working on the first two speakers on the Contributors page.

p/w: TJC2022

Thank you!

4 hours ago, hostyle01 said:

Hi, I am struggling to get this to work on my site too, if I can have some help that would be awesome.

The site is https://magnolia-mandolin-k3fs.squarespace.com/ I have been working on the first two speakers on the Contributors page.

p/w: TJC2022

Thank you!

SS has Accordion Block. You can use it instead of using markdown with code.

https://support.squarespace.com/hc/en-us/articles/4411581892749-Accordion-blocks

Thank you! @tuanphan 😀

On 4/5/2022 at 8:00 AM, hostyle01 said:

Thank you! @tuanphan 😀

Did you solve or still any help?