FAQ: Hide and show the answers

[Kryptix]

I have a FAQ page and I really want them to be clickable links that hide and show the answer when you click the question.

 

http://86.7.138.3/RSCE/faq.html

 

Could someone point me in the direction of a script that will allow me to do that? Either JS or CSS would be great. I really have no-idea where to even start.

[haku]

jquery is a javascript library that makes it easy to write code that will do that. I can't point you at any specific scripts that do what you want however.

[trq]

Just so happens I wrote one of these this morning for work.

 

The jQuery....

 

$(document).ready(function() {
$('.answer').hide();									
$("a[name^='faq-']").each(function() {
	$(this).click(function() {
		if($("#"+this.name).is(':hidden')) {
			$("#"+this.name).fadeIn('slow');
		} else {
			$("#"+this.name).fadeOut('slow');
		}
	});
});
$('.answer').click(function() {
	$(this).fadeOut();
});
});

 

Markup example.

 

<ul class="faq">
  <li>
    <a href="#" name="faq-1">First question is?</a><br />
    <div class="answer" id="faq-1">
      <p>Answer to number one.</p>
    </div>
  </li>
  <li>
    <a href="#" name="faq-2">Second question is?</a><br />
    <div class="answer" id="faq-2">
      <p>Answer to number two.</p>
    </div>
  </li>
</ul>