test blog

The jQuery code

You need the following code call in either your sitewide code injection point or on the page's code injection point. If you already using jQuery scripts elsewhere on your site you can omit this line. 

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

Next up we have the code that does all of the work.

First off there's a clean version for copying and pasting into your page's code injection point. After that I've included  an annotated version so that you can understand what's going on. 

 

 

Clean version:

<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();});
});
</script>

 

 

Annotated version:

<script>

// Document ready tells the script to fire only once the entire page is loaded. 
$(document).ready(function(){

// The next line tells the mouse cursor to becom a pointer when hovering over the H2 elements in the Markdown. 
$('.markdown-block .sqs-block-content h2').css('cursor','pointer');

// The next line initialises the open/close areas by hiding the content
$(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();

//Finally, there is a function that listens for a click on an H2 and either shows or hides its content depending on its current state.
$(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();});
});
</script>