silvabokis

squarespace development + strategy + UX + design & build + marketing

+44 (0)7908 262225

I'm a freelance user experience consultant who delivers projects large and small for a client base that includes multinationals, SMEs, and sole traders.   
I specialise in formulating new media strategy, defining information architecture, user experience design, interaction design, prototyping, user research & testing, website and application building, and online marketing. 

How to create hide/show FAQs in Squarespace

Here's a concise solution for creating hide/show text in Squarespace pages, using a Markdown Block and a jQuery script.

+ How does it work?

The solution uses a Markdown block to hold the questions and answers. For this version of the script it should be the only Markdown block on the page, though I may improve the script at a later date to allow for multiple open/close areas.

A jQuery script then manipulates the Markdown block to add the open/close behaviour.

+ Why Markdown?

The native Squarespace html layouts can be difficult to interpret. Placing a single Markdown block on a page makes it very easy to target with scripting as it has a class of .markdown-block.

Markdown is also easier for a non technical user to edit or add content compared to raw html.

  • It supports bullet points and other styling codes

Markdown blocks can also include html, which opens up the possibility for richer experiences that include imagery and other embedded media.

+ Why jQuery

jQuery is a Javascript framework that removes a lot of complexity when coding solutions that need to work on multiple web browsers.

This open/close functionality is expressed in 4 lines of jQuery code (excluding the call to the main jQuery library) whereas a pure Javascript solution would be far longer.

It's true that the jQuery library can add page load time, but in my code I link to the one hosted on Google's content delivery network, which means there's a strong chance that a user already has the jQuery library in their browser cache.


The solution

NB. Code samples may be reused subject to certain conditions.

The Markdown

IMPORTANT: The content of the FAQ Questions & Answers MUST be inserted into a Markdown Block. Using a standard text block or code block won't work.   

Here's the Markdown code that drives the example at the top of this page. I've edited out a lot of the content to make is easier to read.  

 
## + How does it work?
The solution uses a Markdown block...

## + Why Markdown?
The native Squarespace..

* It supports bullet points and *other* **styling** _codes_ 

Markdown blocks can also include html...

<img src="http://static1.squarespace.com/static/51027975e4b014593379c8b3/t/512f891fe4b0c3388795e1ce/1362070062224/headshot2.jpg?format=200w" /> 

## + Why jQuery
jQuery is a... 
  • ## Denotes an H2 heading. The script interprets these as the links that open/close the content sections. 
  • The + sign is used as a signifier that the heading can be opened. 

 

The jQuery code

You need the following code call in either your sitewide code injection point or on the page's code injection point. If you already using jQuery scripts elsewhere on your site you can omit this line. 

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

Next up we have the code that does all of the work.

First off there's a clean version for copying and pasting into your page's code injection point. After that I've included  an annotated version so that you can understand what's going on

 

 

Clean version:

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

 

 

Annotated version:

 
<script>
  
  // Document ready tells the script to fire only once the entire page is loaded. 
    $(document).ready(function(){
  
  // The next line tells the mouse cursor to becom a pointer when hovering over the H2 elements in the Markdown. 
    $('.markdown-block .sqs-block-content h2').css('cursor','pointer');
  
  // The next line initialises the open/close areas by hiding the content  
    $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
  
  //Finally, there is a function that listens for a click on an H2 and either shows or hides its content depending on its current state.  
    $(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();});
    });
    </script>

Variation 1 - Making displayed answer retract when a new FAQ is clicked:

 
<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() {
    $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideUp();
    $(this).nextUntil("h2").slideDown();
    });
    });
    </script>

Variation 2 - Toggling the + / - symbols

First, the script:

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

Then some custom css

 
.markdown-block p {
margin-left:1.5em;
}
.markdown-block .ui-closed:before {
  font-family:monospace;
  content:"+ ";
}

.markdown-block .ui-open:before {
  font-family:monospace;
  content:"- ";
}