Squarespace DIY - How to Create an Accordion Menu

create-an-accordion-menu.jpg

Hey friends! Today I'm sharing a Squarespace DIY. As you probably know I love Squarespace and I'm always looking for new ways to spruce up my site. I recently came across this code to create an accordion menu while designing a clients website.
 

Check it out in action below:
 

+ You can add anything

Cool, huh?

+ maybe some questions

or course info

+ you can add as many as you like

it's up to you!


This is a great tool to use if you have a lot of info that you want to compress to avoid taking up too much space on your site. You can use it for FAQ's, course module info, really anything that needs to be broken up into sections. 

Before you become overwhelmed with the thought of touching code, lemme tell you, it's easy peasy and I'll walk you through it. 
 

STEP ONE

First take this code (make sure you copy all of it):

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

and insert it into your site-wide Code Injection. You can find that by going to, Settings > Advanced > Code Injection and paste the code into the header section. Below is a screencast to better show you. 

 
 
 


STEP TWO

Next place the below code in your page specific code section. 

<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>

To do this go to whatever page you want the accordion menu to sit and click the settings wheel > place the code in the Page Header Code. Check out the screencast below.


STEP THREE

Now it's time to create your accordion menu. To do this insert a Markdown block on the page where you want to place the menu to sit and copy and past the code below into the Markdown block.

## **+ QUESTION 1**

REPLY 1

## **+ QUESTION 2**

REPLY 2

## **+ QUESTION 3**

REPLY 3

 

Replace the questions and replies with your own words. It's important to keep the # and the * otherwise you might run into some issues. In the video below I've shown you how I set it.

After you've entered all your info make sure to save and refresh, you should then be able to see it in action.

If you want to add the border around each question I'll show you how to do it below. 

Take this code and enter into your custom css box. Head over to your menu and choose Design > Custom CSS:

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

}

 

To change the border colour simply enter your hex code here:

  .sqs-block-markdown h2 {
  border: solid 1px #000; <--enter hex code here (for example #e3e3e3)
  padding: 12px 14px;

}

 

To change the thickness of the border enter the pixel size here:

  .sqs-block-markdown h2 {
  border: solid 1px <-- enter pixel width here  #000; 
  padding: 12px 14px;

}


If you are having trouble with this code make sure you have copied all of the code properly. If you miss something it won't work. 

If you are still having trouble make sure you have pasted the code into the proper section on your website. Read the post again and give it another try. 

If you still need help contact me and I can go into your website for a small fee and set up your menu. 

Code credit goes to Silva Bokis


Shop templates, workbooks, stock photos and more!