Five: Making FAQ page accordion style?

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.

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

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.

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

http://jqueryui.com/accordion/#no-auto-height I tried doing it by referring to this site.

as for making H3 bold. I am nut sure this is the best option but you can always make use of bold tag.

Great. Thanks again. Still working out the heightStyle issue, but this is all a great place to start.

Looks like I'll be resorting to the bold tag—not ideal, but it'll do.

I really appreciate all your help.

Let me know if you need anything more!

Funny, I had a client ask me just today if this could be done in Squarespace. This is sweet – thanks Akshat01 for sharing this.

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

I tried playing around with this too—it works great. I'm playing around with different styling options, but they are all thanks to your invaluable help. Again, many thanks.

Thanks @Akshat01. The Silvabokis website is also very helpful.

This worked great for me too. Is there a way to offer an option for individuals to see an expanded view in one click, in case they want to print it? If so, Can someone provide the code?

Thank you!

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.

@AKSHAT01 How can I change the background color in your code from the gray to a forest green? I don't understand where to change styling options....everytime I try it disables the accordion effect. Please help me :(

@AKSHAT01 How can I change the background color in your code from the gray to a forest green? I don't understand where to change styling options....everytime I try it disables the accordion effect. Please help me :(

can you provide me with a site?

Love this code injection for an accordion!

One problem is popping up for me though. I have a theme with a sidebar, and the pages I have the accordion on lose their sidebar (it ends up at the bottom). What do I need to add?

Thanks so much!

Love this code injection for an accordion!

One problem is popping up for me though. I have a theme with a sidebar, and the pages I have the accordion on lose their sidebar (it ends up at the bottom). What do I need to add?

Thanks so much!

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!

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!

@Akshat01,

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

@Akshat01,

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

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!

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