Accordion content

Instructions here

The markdown blocks host your Accordion's titles (labels). You'll need to place a separate markdown block for each title.

Between the Markdown blocks, under each title, you can insert the blocks/content that you want to be placed in that section of the accordion.

If you have more content after the accordion, you'll need to close it. Add a Code Block where you would like the Accordion to stop. Replace the content in the code block with <div></div>

Find the script here

Paste this into Header or Footer of site, depending on the template used. This site used the footer.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>

init();             //Start the code when the page loads

function init(){
    $('.sqs-block-markdown').nextUntil('.sqs-block-markdown, .sqs-block-code').slideUp();      //Your code (wrapped in a function)
    $('.sqs-block-markdown').unbind().click(function(){
        $('.sqs-block-markdown').not(this).nextUntil('.sqs-block-markdown, .sqs-block-code').slideUp(),
        $('.sqs-block-markdown').not(this).removeClass('activedrop'),
        $(this).nextUntil('.sqs-block-markdown, .sqs-block-code').slideToggle();
    });
  $('.sqs-block-markdown').css('cursor','pointer');
}

document.addEventListener('pageChange', function(){             //When the change page event fires due to ajax
    init();                                                     //Call the code again
});

/*This stuff listens for an ajax page change*/
window.onload = watch;
function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver;var a=new MutationObserver(function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=new Event("pageChange");document.dispatchEvent(d)}}});a.observe(document.body,{attributes:!0,attributeFilter:["id"]})}
</script>
<script>
$(document).ready(function(){
$(".sqs-block-markdown").click(function() {$(this).toggleClass('activedrop');});
});
</script>
<style>
  .sqs-block-markdown {
    border-bottom: solid 1px #ddd;
    cursor:pointer;
  }
  .sqs-block-markdown .sqs-block-content:before {
    content: "+";
    float: right;
    font-size: 150%;
    line-height: 120%;
    color: #aaa;
    font-weight: 100;
  }
  .activedrop .sqs-block-content:before {
    content: "-" !important;
    float: right;
    font-size: 150%;
    line-height: 100%;
    color: #aaa;
    font-weight: 100;
  }
</style>

Add this code into a code block at the end of the page.