Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
wklz

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

Question

22 answers to this question

Recommended Posts

  • 4

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

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0
Guest

@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

Share this post


Link to post
  • 0
Guest

@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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

We can even hide images and text like FAQ

Please check this video demonstration of how to insert accordion in the Squarespace website using markdown block .

The markdown block can be used for inserting contents


I am a Squarespace developer . I have a channel in you tube https://www.youtube.com/channel/UCfHTuXFfsL6eFZynUfj3cdg Contact Me for more details : nidhidhiman004@gmail.com My website: http://galacticsquare.in/

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

@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/ .

Share this post


Link to post
  • 0

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

alt text

pic.jpg.c15aa105e35f2463df0b18e3a38aac29.jpg

Edited by padma
Initial Revision

Web designer

Share this post


Link to post
  • 0

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.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...