FAQ Page Code Wanted!

  • 2
  • Question
  • Updated 8 years ago
  • Answered
How can I create a FAQ page, where when you click on the header (question) the answer appears below?
Photo of Alicia Labossiere

Alicia Labossiere

  • 23 Posts
  • 2 Reply Likes
  • thankful

Posted 8 years ago

  • 2
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
i m not too knowledgeable but you can use either anchor links, so at top remain all the questions n when any of the questions are clicked the visitor is directed to a particular part of page..
the second option is collapsible FAQ.. thats what u probably want i guess!
not any code or idea at hand. will let you know if something comes across :)
Photo of Alicia Labossiere

Alicia Labossiere

  • 23 Posts
  • 2 Reply Likes
Thanks! Yeah I want the collapsible FAQ, I believe littleus could help me with this...or Boomer...but I know this has been discussed before, I ust need a code :S lol
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
Just came across this,
you can have a look
http://www.dynamicdrive.com/dynamicin...
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
also came across this...
here is a demo
http://www.dezinerfolio.com/wp-conten...
you can increase its width to put up complete sentences rather than one or two words..
if you like it, here u can get it: http://www.dezinerfolio.com/2007/07/1...
Photo of Alicia Labossiere

Alicia Labossiere

  • 23 Posts
  • 2 Reply Likes
Monica, they are very nice...but I don't think I can implement those into the yola sites...
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
They probably can be implemented on Yola but here's a code that's very simple to use:

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd...;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Untitled</title>
<script type="text/javascript">
document.write('<style type="text\/css">#toggle { display: none; }<\/style>');
</script>
<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = 'block';
}
}
function hide() {
document.getElementById("toggle").style.display='none';
}
</script>
</head>
<body onload="hide();">
<a onclick="switchMenu('toggle');" title="Test">Put your question here.</a><br><div id="toggle">This text toggles when the question is clicked.</div>
</body>
</html>

See it in action at http://www.testvillage.yolasite.com/e...

Copy and paste it into an html widget. Change the text. For more than one question, paste it into separate widgets, then change the three occurrences of the word "toggle" in the code to "toggle2" for the second question, "toggle3" for the third question and so on. If you have any questions, just ask.
Photo of kim.portrait

kim.portrait

  • 1 Post
  • 0 Reply Likes
Great! Thank you.
I used the code starting from script type="text/javascript" and ending with /body in opencart information page. Works a treat!
Photo of Alicia Labossiere

Alicia Labossiere

  • 23 Posts
  • 2 Reply Likes
I was actually thinking more along the lines of this Diane, the second example.

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

diane

  • 1238 Posts
  • 121 Reply Likes
That script is here: http://www.dynamicdrive.com/dynamicin...

Though I find the other one to be much easier.
Photo of Alicia Labossiere

Alicia Labossiere

  • 23 Posts
  • 2 Reply Likes
Thanks Diane, where do I add the script part? How do I get it in the section?
Photo of Alicia Labossiere

Alicia Labossiere

  • 23 Posts
  • 2 Reply Likes
< head >
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I love the help given on this thread!

To add to the "head" Alicia, just use the HTML Widget and paste in the code. It should work.
Photo of Alicia Labossiere

Alicia Labossiere

  • 23 Posts
  • 2 Reply Likes
Ok, I will test it out and see how it works and let everyone know shortly!
Photo of Alicia Labossiere

Alicia Labossiere

  • 23 Posts
  • 2 Reply Likes
And...it works! Thanks to everyone for the amazing help!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Great to hear Alicia! I'm sure that both Diane and Monica will be doing the happy dance as well! :)
Photo of perfmarine

perfmarine

  • 2 Posts
  • 1 Reply Like
Your Reps are fantastic, added the script Diane showed above, added my question and answer in the code, cut and pasted that to a widget and bam! There it is right in front of me!!!
Thanks from a new user!
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
So glad you found it to be a snap perfmarine! Care to share your site?
Photo of perfmarine

perfmarine

  • 2 Posts
  • 1 Reply Like
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks for sharing! It looks great!