Create an FAQ accordion menu on any template

Here’s the live version of the accordion menu:

+ QUESTION 1

REPLY 1

+ QUESTION 2

REPLY 2

+ QUESTION 3

REPLY 3


STEP ONE

You will first want to add the code below to your site-wide Code Injection. and insert it into your site-wide Code Injection by going to Settings > Advanced > Code Injection and paste the code into the header section.

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

STEP TWO

Next, you will need to plate the code below within the page code section. You can find this by navigating to the pages settings (the gear icon that appears to the right of the page name when on hover).

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

This code creates the drop down portion for any HEADING 3 text used in a markdown block. You can change the ‘h3’ portion of the code above to ‘h2’ for heading 2, ‘h1’ for heading 1, or any other heading you have created for your website.


STEP THREE

Now it’s time to create your accordion menu. Add a Markdown block to the area where you want to add your accordion menu.

Next, you will want to copy and past the code below into the Markdown block.

### **+ QUESTION 1**

REPLY 1

### **+ QUESTION 2**

REPLY 2

### **+ QUESTION 3**

REPLY 3

If you have decided to do heading 1, you will need this code:

# **+ QUESTION 1**

REPLY 1

# **+ QUESTION 2**

REPLY 2

# **+ QUESTION 3**

REPLY 3

For heading 2, you want this code:

## **+ QUESTION 1**

REPLY 1

## **+ QUESTION 2**

REPLY 2

## **+ QUESTION 3**

REPLY 3

Next, you’ll want to replace the questions and replies with your own, feel free to add as many or as less as you want!


Step four

Once you’ve entered the FAQ information you want to showcase, make sure to save an refresh the page. This will allow you to see the page in action.

Now we need to add the Custom CSS in order to style your accordion menu. Go to DESIGN > ADVANCED > CUSTOM CSS, and paste this code below into your CSS panel.

.sqs-block-markdown h3 {
    border: solid 1px #000;
    padding: 12px 14px;
}

Again, for heading 1, you’ll want to change the ‘h3’ to ‘h1’, for heading 2, you’ll change it to ‘h2’.

You can change the border width by changing out the ‘1px’ to a higher number. A higher number means a thicker border line.

You can also change the border color by changing the hex code (#000) to any color that matches your branding.

If you would rather not have a border color, but have a background color, you can instead use the code below:

.sqs-block-markdown h3 {
  background: #f9f9f9;
  padding: 12px 14px;
}