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

Five: Making FAQ page accordion style?


lrosen

Question

I’m building a site — firstpersonessaycoaching.com — and I’d like to hide the answers to the questions on my FAQ page so that they are revealed when you click on the text of the question.

I read Silvabokis’ How to create hide/show FAQs in Squarespace — but I would be out of my depth with jQuery. Would someone be able to suggest another way, or perhaps provide a little more guidance for the jQuery suggestions so that someone with very little experience can do it?

Thanks in advance.

Link to comment
  • Answers 38
  • Created
  • Last Reply

Recommended Posts

Add this to your header injection for that page or just as a code block


<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
 $(function() {
   $( ".accordion" ).accordion();
   $(".accordion").accordion({ header: "h3", collapsible: true, active: false ,heightStyle: "content" });
 });
 </script>


then format your FAQ and insert them as a code block too.


<div class="accordion">
<h3>question goes here</h3>
   <div>
     <p>Answer goes here</p>
   </div>
<h3>question goes here</h3>
   <div>
     <p>Answer goes here</p>
   </div>
</div>

If you want to further style it, add custom css to .accordion

Link to comment

Hello @luckydx302,

Please refrain from self-promotion without providing a solution to the question. This goes against the Squarespace Answers posting guidelines. We have gone ahead and removed the posts that violate these guidelines, which can be referenced here. Thank you.

Link to comment

This is great! Thank you!

I have a couple of styling questions, though:

1) I'd like h3 (the questions) to be bold, but when I insert "font-weight: bold" it seems to undo the accordion styling. I may be inserting it in the wrong place.

Link to comment

@akshat01

Great code, really easy to use but how can I change the theme to match my site (www.oggyoggyteam.com) ? I'm using the Bedford template

I have been playing around with some code but I can not get the effect I want. I have been mixing: -

Placing this in my header code section:

With: ( as a page code injection block)

Read more


 <div>
  <p>Test text d;oakfgjadsofjh ;oih pfdi aogi pih dokg [diajfg sd' jz[ijv 'dlm 'zpdogj [fd0 zdkjv [fi jbds j'dfjf [i jdkjg sfij[apovj 'zpdj ij[j 0 08u   [pojfd[dsij df jds 
   g;oidshgpsig js[dijg s
   sd[sijg [fsi jg[sijg p9sdij   poiudhfgp9sih g[sdijv 9[s8nug v[ isd jg[0</p>
</div>


With :-

Link to comment

Second question:

2) I'd also like the drop-down answers to fill the entire frame around them, or rather, have the frame adhere close to the answers. I've tried "heightStyle: content" and "heightStyle: fill," but in both cases, there seems to be a lot of negative space around the shorter answers. How can I change this?

Check out the duplicate unlinked page I made to try your code: http://www.firstpersonessaycoaching.com/faq-copy-2

Link to comment

@akshat01 This is awesome! I'm trying to automatically expand a specific h3 in the markdown by giving it an id :


 ### + This is the Question
<p id="answer1"> this is the answer</p>

and then adding a script so that a # in the url (i.e. /faq#answer1). will automatically expand it. Any ideas? Thanks so much!

Link to comment

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)

Link to comment

@akshat01 I have pasted the two HTML codes like you said, but it is not working for me.

The questions and answers appear but the accordion feature is not there. I've pasted what you said in the header and also formatted the questions in the style you say in a code block.

I'm also using Five. Any idea what it could be?

Elissa

Link to comment

I've run into 2 problems regarding this:1. I have a paralax image that comes after this block and it will not show until I expand the text. It seems to be compensating for the full length once the text block is revealed. I end up resizing the window and it refreshes itself, but this is not ideal.2. When I go to another location on my site then come back to the page with the expandable text blocks they no longer have the expandable capability, and all of the concealed text is actually visible! Like there wasn't even the concealment to begin with. Do you know why this might be the case?

Link to comment

@Irosen and maybe @widwotkma might be interested too:

Do you still want to implement the FAQ page similar to this: How to create hide/show FAQs in Squarespace?

Here is how you would do it, read this Markdown cheatsheet thoroughly.Then insert this code as Markdown:


### + This is the Question
this is the answer

### + This is the Question
this is the answer

### + This is the Question
this is the answer

### + This is the Question
this is the answer

### + This is the Question
this is the answer

Now insert another code block and paste the script provided on Silvabokis.com


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

See how I have use ### in the code and h3 in the script? If you plan to make h2 toggling, use ##


## + This is the Question
this is the answer

And the resulting script would be:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<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>

Excuse me if I couldn’t make it any simpler. If you still need more help, reach out to me on Twitter / akshat_01

Thanks!

Link to comment

Solution: To those who find that the heightSyle: "content" isn't working.

I got mine to work by removing the first line of $( ".accordion" ).accordion(); from the original code above so that there is only one and not two. It comes after the $(function() { part.

Hope that helps!

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.

×
×
  • Create New...