Can I force a custom script to load after other elements?

Site URL: https://www.mh316.org/bible-studies/the-god-of-new-beginnings

Pass: myrtlefield

I asked a question about slow loading images, but no response. I think I figured the issue is my accordion script. It seems that when it is active, SQ loads the Markdown Accordion box before the image at the top of my page. This makes it look like the page is very slow. However, if I add 'defer async' to the Custom Code JavaScript, the Accordion function doesn't load at all!

Working code with slow image load:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h1').addClass('ui-closed').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h1").nextUntil("h1").slideToggle();
    $(".markdown-block .sqs-block-content h1").click(function() {
      
      $(this).nextUntil("h1").slideToggle();
      $(this).toggleClass('ui-closed ui-open');
      });
    });

Not working code with fast image load:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" defer async></script>

<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h1').addClass('ui-closed').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h1").nextUntil("h1").slideToggle();
    $(".markdown-block .sqs-block-content h1").click(function() {
      
      $(this).nextUntil("h1").slideToggle();
      $(this).toggleClass('ui-closed ui-open');
      });
    });

2 hours ago, MatthewCraig said:

Site URL: https://www.mh316.org/bible-studies/the-god-of-new-beginnings

Pass: myrtlefield

I asked a question about slow loading images, but no response. I think I figured the issue is my accordion script. It seems that when it is active, SQ loads the Markdown Accordion box before the image at the top of my page. This makes it look like the page is very slow. However, if I add 'defer async' to the Custom Code JavaScript, the Accordion function doesn't load at all!

Working code with slow image load:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h1').addClass('ui-closed').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h1").nextUntil("h1").slideToggle();
    $(".markdown-block .sqs-block-content h1").click(function() {
      
      $(this).nextUntil("h1").slideToggle();
      $(this).toggleClass('ui-closed ui-open');
      });
    });

Not working code with fast image load:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" defer async></script>

<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h1').addClass('ui-closed').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h1").nextUntil("h1").slideToggle();
    $(".markdown-block .sqs-block-content h1").click(function() {
      
      $(this).nextUntil("h1").slideToggle();
      $(this).toggleClass('ui-closed ui-open');
      });
    });

You may want to place the code to footer of the code injection?

40 minutes ago, bangank36 said:

You may want to place the code to footer of the code injection?

Hey, I've tried putting the code in all available areas: Header, Footer, Blog Header, Blog Specific and the load order happens the same each time. It always tries to load the full Markdown Accordion before it loads the image.

Any reason why the 'defer' tag would stop the script running at all?

Hi @MatthewCraig

I see that you used some custom code to create an accordion on your site and it has been causing some issues. I'm happy to say it is now possible to add an accordion to your site without additional code using the accordion block! We have some information about the possibilities and customizations of the Accordion Block in our guide "Accordion blocks" should you want to take a look.