How to create accordion

Accordion script is created in two steps: add the script to the page header, and then create the content in a markdown block.

Add the script to the page

1 - In the left-hand navigation, find the page you want to add the accordion to. Click the gear icon to edit the page.

2 - Click on the Advanced tab. Copy the script from below into the Code Injection window. Click save.

<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h4').css('cursor','pointer');
$(".markdown-block .sqs-block-content h4").nextUntil("h4").slideToggle();
$(".markdown-block .sqs-block-content h4").click(function() {$(this).nextUntil("h4").slideToggle();});
});
</script>

Create content in a markdown block

After the script has been added, it uses information in a markdown block to determine what is part of the accordion.

1 - Create a markdown block

2 - Create the first heading by typing “####” (4 hashtags means heading level 4) followed by a space, and then your heading. We use the “+” to cue the reader that the heading is an accordion, but it’s not strictly necessary. e.g.

#### + First Accordion heading

3 - Hit enter to go to the next line and then write all the content that will be below the accordion. Hit enter a couple of times after the content to create a space before the next heading.

4 - Repeat steps 2-3 for as many entries you wish to be in the accordion

5 - Create a new text block (or any content block) below the accordion to continue adding other content.

Example

Inspect the example below by editing this page and looking at the markup block.