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

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?

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

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?

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

@Akshat01 This is amazing - thanks for sharing! Sorry to be a pain, but do you know what I should enter into the CSS to change the font of the text in the hidden answer areas? It's appearing as a different font to the normal font for the rest of the site, but I don't know enough about CSS to know what the code should be.

Link to comment

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

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

Hello @Akshat01 I have recently used this code on my page and it works beautifully but now I want to have the answers indent a little to align with the text rather than the + and I would also love the links in the text to open in a new window but that option doesn't appear. Do you know how I might do that? Thanks!

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