lrosen Posted March 5, 2015 Posted March 5, 2015 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.
Guest Posted March 16, 2015 Posted March 16, 2015 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
lrosen Posted March 17, 2015 Author Posted March 17, 2015 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.
lrosen Posted March 17, 2015 Author Posted March 17, 2015 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
Guest Posted March 17, 2015 Posted March 17, 2015 http://jqueryui.com/accordion/#no-auto-height I tried doing it by referring to this site.
Guest Posted March 17, 2015 Posted March 17, 2015 as for making H3 bold. I am nut sure this is the best option but you can always make use of bold tag.
lrosen Posted March 17, 2015 Author Posted March 17, 2015 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.
ChrisK Posted March 19, 2015 Posted March 19, 2015 Funny, I had a client ask me just today if this could be done in Squarespace. This is sweet – thanks Akshat01 for sharing this.
Guest Posted March 19, 2015 Posted March 19, 2015 @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!
lrosen Posted March 20, 2015 Author Posted March 20, 2015 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.
ChrisK Posted March 20, 2015 Posted March 20, 2015 Thanks @Akshat01. The Silvabokis website is also very helpful.
Guest Posted July 21, 2015 Posted July 21, 2015 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!
Guest Posted August 25, 2015 Posted August 25, 2015 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.
NROBINSON Posted September 1, 2015 Posted September 1, 2015 @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 :(
NROBINSON Posted September 1, 2015 Posted September 1, 2015 @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 :(
SingingGoose Posted January 9, 2016 Posted January 9, 2016 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!
SingingGoose Posted January 9, 2016 Posted January 9, 2016 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!
T J Posted January 11, 2016 Posted January 11, 2016 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!
T J Posted January 11, 2016 Posted January 11, 2016 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!
Guest Posted March 4, 2016 Posted March 4, 2016 @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
Guest Posted March 4, 2016 Posted March 4, 2016 @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
T J Posted March 5, 2016 Posted March 5, 2016 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!
csmiller1988 Posted March 10, 2016 Posted March 10, 2016 @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!
Recommended Posts
Archived
This topic is now archived and is closed to further replies.