Squarespace DIY - How to Create an Accordion Menu

create-an-accordion-menu.jpg

Hey friends! Today I'm sharing a Squarespace DIY. As your 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. 

You can take it one step further and add a fancy border around each question, like this:

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

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:

<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. Design>Custom CSS:

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

}

You can play around with the box colour, border size, and the padding. 

If you need up using this code on your site I'd love to see how you used it. 


Code credit goes to Silva Bokis