How to create a FAQ?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
When creating a FAQ page, is there a way when you click on the question, that a box opens up below the question with the answer and then you can click on it close it up again?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
  • thinking there must be a way

Posted 10 years ago

  • 1
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
Try this page, does it help, its a dailogu box with an X button,

http://tipsandtricks.synthasite.com/m...

alex
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Alex for your suggestion.. but it doesn't seem to work for me. I don't even see a dialogue box with an x in it! Weird.

I want the box to open up only when you click on the hyperlink.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
How about this Littleus:
http://www.dynamicdrive.com/dynamicin...
I think the code could be changed from "onmouseover" to "onclick"

I just love Sharon Paine's work
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Boomer.. that is more of what I was looking for. However, I am not at all good with javascripts' language. I think it might be too advanced for me.
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Boomer, I just found the same website! But a different link: http://www.dynamicdrive.com/dynamicin...

Not sure if that's what you're looking for Littleus? It seems that you need to have access to the though. If it is what you're looking for, we can search some more or I can ask someone for more help.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
This is how I was envisioning it:

Q1. blah, blah, blah (this is a hyperlink)
Here is the box that opens up below when you click on the hyperlink which contains the answer and can be closed after clicking on it.
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
The link I've given also requires you to upload a .js file, which is not allowed on Yola. Hoping Boomer has the answer below, otherwise, I'll ask around :)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Ok, I actually missed the "drop down" part...Sorry Littlus.
I have not tried the link I supplied, but I've used some of Sharon
Paine's other code and it works well.
I'm using a similar thing here: http://forsite.synthasite.com/website...

It could work for you....... "lateral thinking"
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I think I've seen what you are looking for Littleus.
Give me a mo to find.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Boomer, I appreciate any kind of help!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hey Littlus, don't go away, ok.
I'm nearly finished!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Ok, tell me what you think and what you would like changed.
You can change: border colour, size, tooltip follow, link (target=blank), title text i.e. "click here to find out more".

http://hindsite.synthasite.com/little...
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
cool mouse over preview.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Wow Boomer, thanks for all your hardwork. I don't think I'd change anything!
I may end up using that code if you don't mind?!

In the meantime, what I really really want is the example seen here:

http://www.tjkdesign.com/articles/tog...

I just don't know how to implement it or find a code that is easy enough for me to understand and use.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Don't feel obliged to use it. I'll have look at the other one for you later.
Got to watch the Sharks annialate the Crusaders now.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Here's another tutorial on how to make those toggle expand/collapse thing but I just can't figure out how to put it all together. I really like the idea of using the colors in this one as well:

http://www.randomsnippets.com/2008/02...
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Wow, that does look quite lengthy. I'll take a look later (unless Boomer beats me to it ;)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Marije... I really appreciate you taking the time to do this!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hey Littleus,

I can't seem to get the last two links (code) to work.
I have however done two other examples for you.
They are a bit simpler and don't require .js file linking or downloading.
The second one seems pretty customisable (images etc.)

http://hindsite.synthasite.com/little...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Perfect Boomer!! I really like the second example. Do you think it's possible to put on an image like a "+" and (-) to open and close. If not, then, that's okay too. I'm quite happy with how it is.

Thanks sooo much Boomer. Let me know about the image thing. If that's not a possibility, then should I just copy the code from your site?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Let me give it a bash....
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Bash away my friend!

.
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Great work Boomer, you did beat me to it :) And far better than what I would have achieved!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Boomer is so awesome! Thanks again Booomer!

Thanks Marije for even taking the time to look into this as I know you have a thousand other things take care of!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Take a sneak preview at my newly created FAQ!

http://dejavuapparel.synthasite.com/faq

Isn't it so pretty?! =)
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
It looks fantastic! Well done :)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
You see.... it needed a woman's touch.
It looks really stunning Littleus, You did a really good job. Well done!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Marije and Boomer! I'm very happy with it.

p.s. boomer, I found a script that allowed me to use the toggle on and off (+) and (-)! If you want the code, let me know. I'm not gonna use it right now but I have it tucked away in my stash of stuff I want to use eventually! =)
Photo of Alicia

Alicia

  • 27 Posts
  • 0 Reply Likes
Boomer, I saw the demo pages for littleus you made. Awesome stuff, I was wondering if I would be able to use the Menu style feature on there...and if I could get the code from you.

Thanks Boomer!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Of course you can. Which one exactly did you want.
Photo of Alicia

Alicia

  • 27 Posts
  • 0 Reply Likes
The Block style menu? It's exactly what I was looking for to add to the Info Panel to save space!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Alicia,

Heres the script I used for that:
http://www.dynamicdrive.com/dynamicin...
Let me know if you need any more help.
Photo of Alicia

Alicia

  • 27 Posts
  • 0 Reply Likes
Hey Boomer, where do I apply the code for the script part?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Just place it in a seperate HTML widget at the top of your page.
It does not even have to be at the very top.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Alicia,
Drag one html widget over and put the script code in. It should go under your header. Then, drag another html widget over and put it underneath the 1st html widget. Paste the body code into that one. It should hopefully work!
Photo of Alicia

Alicia

  • 27 Posts
  • 0 Reply Likes
Hey littleus, when I put the head script in, it shows: .submenu {display:none;}
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hey Littleus, you know the answer to this one don't you ;-)
Photo of Alicia

Alicia

  • 27 Posts
  • 0 Reply Likes
:O All I had to do was update my site! :D
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Glad you got it figured out!
Photo of Alicia

Alicia

  • 27 Posts
  • 0 Reply Likes
Thanks Boomer for the code and the help!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Is it working for you Alicia ??
Photo of Alicia

Alicia

  • 27 Posts
  • 0 Reply Likes
Yes it is working! :D If I have any problems, I will be sure to ask for help.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Looks good on your site ;-)
Photo of Alicia

Alicia

  • 27 Posts
  • 0 Reply Likes
Thanks Boomer!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi again Alicia,

One thing I noticed about the new menu on http://entremomneurs.synthasite.com/i...
which looks really great btw, is the button colours.

I got this link from a previous post here on GS and I don't know how I ever got by without it. It's a Firefox add-on called Colorzilla. Its a great tool for picking out and matching colours on any website. http://www.colorzilla.com/firefox/

My thoughts are that those buttons would look much nicer if you matched
them up to a theme colour from your site. What I had in mind was the same colour green as in the banner. I took the liberty of sampling the colour for you.

Give it a try. Here's the hex code for that shade of green: #D3D66B
Use it....... don't use it.
Hi, any other way to create a FAQ page now in Yola please ?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello RISC,

Mozilla have an outline how to here which is a very good explanation and an easy method.
Hi, sorry no idea on what you pointed me to..care to explain ?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Roger,

Gop was pointing you to this link: https://developer.mozilla.org/Project...

I hope you find the information helpful.