jQuery Simple FAQ

Simple FAQ: This example uses jQuery to build a simple show/hide FAQ with feedback. Clicking the headings reveals the linked text. Clicking another heading hides all the others and shows the clicked one.

This version doesn't have any user feedback implemented to keep the code very simple.

A Simple jQuery FAQ

I've heard that JavaScript is the long-lost fountain of youth. Is this true?

Why, yes it is! Studies prove that learning JavaScript freshens the mind and extends life span by several hundred years. (Note: some scientists disagree with these claims.)

Can JavaScript really solve all of my problems?

Why, yes it can! It's the most versatile programming language ever created and is trained to provide financial management advice, life-saving CPR, and even to take care of household pets.

Is there nothing JavaScript can’t do?

Why, no there isn’t! It’s even able to write its own public relations-oriented Frequently Asked Questions pages. Now that’s one smart programming language!

Notes:

See the code:


<script>
$(document).ready(function(){
  
  // Hides all the answers when page is first loaded
  $('.answer').hide();
  			
  $('.main h2').click(function() {
    // Hides *all* the answers
    $('.answer').hide();
				
    // Shows just the answer associated with the currently clicked heading
    // .toggle() switches between hiding and showing an element. Since
    // all answers are hidden now, it uses $this and .next to just show
    // the answer associated with the clicked heading.
    $(this).next('.answer').toggle();
  }); // end Toggle
}); // end ready
</script>