How do I create hide/show FAQs in Squarespace (collapsed text) ?

wklz · March 11, 2015

FAQs with code

Edited August 29, 2016 by Testing2134
retag

wklz · March 11, 2015

In order to achieve Show/Hide FAQs you can use the Markdown Block and a jQuery script, as shown in this tutorial on this site (here)

First, you need to inject this code call below, in the site-wide Code Injection (Settings > Advanced > Code Injection Header):

Code call:

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

Then, you need to add this jQuery script below in the page specific Code Injection:

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

Then you will need to add a Markdown Block on the page with the following structure:

## **+ QUESTION 1**

REPLY 1

## **+ QUESTION 2**

REPLY 2

## **+ QUESTION 3**

REPLY 3

In this video below, I have guided you through the whole process:

SOURCE FOR THE CODE: Silva Bokis

Edited March 11, 2015 by wklz

Megalomaniac · August 31, 2015

New Member here... This was very helpful for me learning how to do this for text, tested it and worked great.

I just posted a similar question, one that poses the question how you would do this to text, galleries and images on a page. I have no idea and would like to see if someone could tackle this?

https://answers.squarespace.com/questions/97633/how-do-i-create-hideshow-section-of-an-entire-page-of-text-images-and-or-galleries-in-squarespace-spoiler-functionaccordiancollapse

March 4, 2016

@wklz Thank you for your help. I tried this out but the javascript doesn't seem to be working in mine. I'm on the Mercer template. What do you think might be the issue? My site is: http://hexagongallery.com (WIP password: boardsofcanada).

Thank you,A

March 4, 2016

@wklz Thank you for your help. I tried this out but the javascript doesn't seem to be working in mine. I'm on the Mercer template. What do you think might be the issue? My site is: http://hexagongallery.com (WIP password: boardsofcanada).

Thank you,A

August 9, 2016

Hey @wklz, is it possible to change the font size of the subject line that drops down? (Question 1?) I can't figure it out. Have tried to change 'h2' to 'h3' and it just breaks the code.

August 9, 2016

Hey @wklz, is it possible to change the font size of the subject line that drops down? (Question 1?) I can't figure it out. Have tried to change 'h2' to 'h3' and it just breaks the code.

Cthanatos · August 31, 2016

This is Great! Thanks! I just had a question, how do I go about changing the Text properties on this page? Will I have to use CSS or is there an easier way? I noticed that the video example had the text specialized with colors and fonts and such. Thanks!

karenh · October 4, 2016

Hi this also isn't working for me. Is there an update?

devonstank · December 11, 2016

There are many solutions out there (some good and some bad), but you'll need to do some Googling to find them. Basically, you'll need to Have some JavaScript run under the code injection section to manipulate some HTML within a code block. This feature is typically called a drop-down accordion.

Devon Stank @ Devonstank.com (Squarespace Tips & Tricks)

Edited December 11, 2016 by Vexsoft
Initial Revision

PDubATL · January 28, 2017

This did not work for my site: ATLSoundStudio.comMaybe it's because I have soundcloud code blocks embed for audio playbackBummer

logaritym · May 1, 2017

I found a solution which looks like this one, but has more customization options, and also can hide images. I have added the code here - > https://answers.squarespace.com/questions/176218/spoiler-button-hidereveal.html#answer-176381

Just_Sy · July 16, 2017

Does this work if I'm working on an index? Would I have to inject the code on all pages of the index? Hope to hear from you soon! @wklz

lulu.lindberg · June 1, 2018

@wklz this solution was working on my site: https://www.ashbylake.net/about/until I added the links that say "Read the full Terms of Reference for the ... "

I didn't change anything else... do you know what might be the fix? Thank you in advance!

mrooks98102 · December 28, 2018

Hi - I used these codes and worked out great. Just one little issue. When you go to the page, all of the content is expanded and the only way to get it to collapse is to refresh the page. Then it expands/collapses perfectly. How do I get the content to collapse from the onset of navigation? Here's my page for reference https://www.roosthomewatch.com/faq/ .

mychentt · March 21, 2019

Can anyone please please explain the function of each line of the code? I am trying to customize it a bit so that we don't have to call the show/hide function by "h2" -- the goal is to adjust the spacing before and after as well as the font type/size/color of the expanded item (i.e. the "question" in this case).

It will be really helpful! Thank you in advance.

schuler_jasmin · April 6, 2019

@mrooks98102 I have the same issue! Did you find a solution for it?Thanks Jasmine

mrooks98102 · April 6, 2019

Hi - no, I haven't. Do you have one by chance?

schuler_jasmin · April 7, 2019

unfortunately, I don't :(

mrooks98102 · April 8, 2019

@wklz - Hi - I used these codes and worked out great. Just one little issue. When you go to the page, all of the content is expanded and the only way to get it to collapse is to refresh the page. Then it expands/collapses perfectly. How do I get the content to collapse from the onset of navigation? Here's my page for reference https://www.roosthomewatch.com/faq/ .

July 19, 2019

try this (three hashes (###) instead of two.)

Edited July 19, 2019 by padma
Initial Revision

mrooks98102 · July 22, 2019

Thanks for the suggestion but that didn't affect the accordion - it only changed the font size. I think the problem lies within the injection code of the page header, but I can't figure it out.

artpimpress · September 9, 2021

Thank you for the solution to add css to create the accordion affect. We would like to have the first "tab" open. Any adjustment advice on this?

https://prism-bluebird-55bf.squarespace.com/speaking

password: bair

tuanphan · September 12, 2021

On 9/9/2021 at 7:37 PM, artpimpress said:

Thank you for the solution to add css to create the accordion affect. We would like to have the first "tab" open. Any adjustment advice on this?

https://prism-bluebird-55bf.squarespace.com/speaking

password: bair

Incorrect password. Can you check it again?

Amaya_SQSP · February 18, 2022

Hey all,

It is now possible to add an accordion menu to your site without custom code using the accordion block! We have some information about the possibilities of the Accordion Block in our guide "Accordion blocks."

How do I create hide/show FAQs in Squarespace (collapsed text) ?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Link to comment

Link to comment

Guest

Link to comment

Guest

Link to comment

Guest

Link to comment

Guest

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Guest padma

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources