Jump to content

Five: Making FAQ page accordion style?

Recommended Posts

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
  • 2 weeks later...
  • Replies 38
  • Created
  • Last Reply

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

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

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

@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
  • 4 months later...
  • 1 month later...

Hi, I've done what you've said above and it's worked really great. I was just wondering, my faq has different sections which I've broken down with individual titles. Each section though is being moved slightly over to the right because of the accordian effect. Is there a way I can add other sections below the first section of my faq and have them all be straight under one another? Let me know if this makes sense.

Link to comment
  • 2 weeks later...
  • 3 months later...

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

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
  • 1 month later...

I'm also running into this issue. Sidebar is bumped to the bottom in the Five theme. Does anyone have a solution? Any styling that I try to add in the header injection seems to break the accordion feature.

Also, does anyone know how to control the width of the grey bars? If your page is set to full width they extend all the way across the page which looks a little funny when there's only a little bit of text in them. Thanks!

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

Archived

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

Guest
This topic is now closed to further replies.
×
×
  • 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.