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

Markdown Collapsable/Expandable/Accordion Text Overflow Issue


HarmlessStudio

Question

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

alt text

alt text

screen-shot-2019-09-23-at-12212-pm.png.7bca92062fe7b4baf42787b0b3603fe1.png

screen-shot-2019-09-23-at-12227-pm.png.5361d338b0bf7acf782ecb12fcdcc7ea.png

Edited by HarmlessStudio
Initial Revision
Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0

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>

 

Edited by nevinmcconnell
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...