Markdown Collapsable/Expandable/Accordion Text Overflow Issue

I'm using Markdown to create an expanding accordion menu. When you first view the page, the text is hidden. You can click to expand a drop down accordion menu that displays nested text. The issue is that the expanded text messes up the way elements below it on the page display. It looks like the images and backgrounds below the markdown do not respond to the expanded text and remain in their initial position, but the text below the markdown does respond to the expanded text and moves further down the page. The result is that the text appears to overlay or overflow on top of the content beneath the markdown.

I already contacted Squarespace support and they verified that this issue was not a known issue, that it is not currently in the works for resolution, and that it has nothing to do with my custom CSS. They suggested I ask the forum, so I'm coming to you guys!

The structure for the site I'm using to illustrate this is as follows:Brine templateIndex with pagesSolid color blocks are their own pagesFull bleed images with parallax are their own pages with the image set as the background for the page

Here is the Markdown basic structure:

<details>
 <summary>Click to expand!</summary>

content goes here

</details>

Illustrated on this Github forum here: https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab

I saw in other questions that some issues with Markdown could be resolved by disabling Ajax loading. I have disabled it and still see the issue.

Would love some help with this!

Website: teese.squarespace.comPassword: teese

^^ having same issue as this original question.  Can't seem to find answers, appreciate if someone finds out what's going on! 

Update: Got a fix that works on my site!

Credit to Brad Good for providing a HTML-based solution for an accordion , that I adapted for markdown boxes.   I found his site:  https://www.bradgood.net/articles/faq-accordion-menu   

And then adapted his code for my markdown-based 'accordion dropdown' blocks. 

In Squarespace, I have this code in Settings -> Advanced -> Code Injection -> Header.  Be weary of having multiple code injections on various pages, as it can create errors. 

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  //this sets up my markdown blocks site-wide
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h2').addClass('ui-closed').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
    $(".markdown-block .sqs-block-content h2").click(function() 
	{
      		$(this).nextUntil("h2").slideToggle();
      		$(this).toggleClass('ui-closed ui-open');
 	 });
    });
    </script>



<script>
      //this initializes the page during initial load.  I would see this odd error without this code below: each time I refreshed the page, I would randomly see the text overflowing/misaligned at the bottom of my page.  But each time I clicked an of the accordion dropdown blocks, the page would align properly and it looked great.  So I just made an initial call to do the same code when you refresh the page. 
  window.Squarespace.onInitialize(Y, function(){
    //FAQ toggle
      $(this).toggleClass('open').children('ul').slideToggle(); 
      setTimeout(function(){
        window.dispatchEvent(new Event('resize'));
      }, 300);
  });
</script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  //this is the code interacting with the markdown-based "accordion dropdown" blocks.  It re-aligns content on the site each time one of the dropdowns is opened/closed
  window.Squarespace.onInitialize(Y, function(){
    //FAQ toggle
    $('.markdown-block').click(function() {
      $(this).toggleClass('open').children('ul').slideToggle(); 
      setTimeout(function(){
        window.dispatchEvent(new Event('resize'));
      }, 300);
    });
  });
</script>

Hi @nevinmcconnell
Please check this post, It will help you!

Please let me know if you have any question about using it!

Please use the like button if it helps you!

Best,
Leopold