How to use Markdown in Squarespace

Are you interested in using a dropdown accordion on your Squarespace website but aren’t sure how to do it? I’m here to help. This is great for FAQ pages, or hiding large areas of text that can be expandable plus the Markdown feature is a great resource to your Squarespace tool belt

Here’s how to add one to your Squarespace site.

How+to+use+Markdown+in+Squarespace.jpg

let’s get started

Screen Shot 2019-08-15 at 2.34.30 PM.png

step 1

Adding javascript to open and close the accordian (+ symbol)

Open up your page in Squarespace and add a Code block.

Screen Shot 2019-08-15 at 2.35.17 PM.png

Step 2

Copy and paste the code below and then click “APPLY“

 
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<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>
Screen Shot 2019-08-15 at 2.37.30 PM.png

Step 4

Secondly, add a Markdown block to you page.

You can use the Markdown feature for pages like FAQ, I’ve used this feature on my Client Showcase page to write a bit about my client and then describe what I did on the project.

Screen Shot 2019-08-15 at 2.37.58 PM.png

For FAQ pages

If you are using the Markdown feature for a FAQ’s page, here you go! You can edit the questions and answers as you please and copy and paste to create as many Q’s and A’s as you like.

You can add your own text and delete the + sign if you'd like but don't touch the ###. The (###) manipulates the Markdown block behavior to open/close.

### + Question 1?
Answer Here

### + Question 2?
Answer Here

### + Question 3?
Answer Here

 

Another way to use Markdowns with H2 titles

+ CHEAT SHEET

Use the Squarespace Markdown Cheat Sheet to enrich your markdowns!

+ CHANGING HEADER TIPS

The code above is to use your Header 3 (H3) as the title font, to use your Header 1 (H1) or Header 2 (H2) replace all "H3" in the code to either H1 or H2


RELATED POSTS