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

Five: Making FAQ page accordion style?

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.

Edited by emca

Share this post


Link to post

Recommended Posts

  • 8

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

Share this post


Link to post
  • 2

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

Edited by Akshat01
corrected typos

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 1

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!

Share this post


Link to post
  • 0

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.

Edited by lrosen

Share this post


Link to post
  • 0

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

Edited by lrosen

Share this post


Link to post
  • 0

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

Edited by widwotkma

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

@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 :(

Share this post


Link to post
  • 0

@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 :(

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Edited by csmiller1988

Share this post


Link to post
  • 0

Hi Guys - Got a bit of a problem...

I'm using the code above and everything is working perfectly for me in the admin pages and the accordion is working exactly as it should.

However, the accordion does not work on the live site.

I have spoken to Square Plugin Support who provided the code and they are unable to fix the problem. I have spoken to Sqaurespace Support and they cannot offer any help on any 3rd Party code.

Do you have ANY ideas why it would be working on the admin pages but not on the live site?

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...