Jump to content

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

Go to solution Solved by wklz,

Recommended Posts

  • Replies 24
  • Views 35k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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

Sell crazy some place else, we are all stocked up here

Link to comment
  • 5 months later...

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

Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Link to comment
  • 6 months later...
  • 5 months later...

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.

Link to comment

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.

Link to comment
  • 4 weeks later...
  • 1 month later...
  • 2 months later...

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 by Vexsoft
Initial Revision
Link to comment
  • 1 month later...
  • 3 months later...
  • 2 months later...
  • 10 months later...
  • 6 months later...
  • 2 months later...

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.

Link to comment
  • 3 weeks later...
  • 3 months later...
  • 2 years later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.