FAQ Page due May 12, 2014


Move forward with the FAQ page we started together in class (on Codepen).

Suggested next steps

  1. Get the second question working, so that it can hide and show its answer.
  2. Make it so that when a user open an answer, any other answers that were already open get closed by default.
  3. Hide all the questions when the page loads.
  4. Reveal the questions for a given theme when the user clicks on that theme.


  <div class="faq">
      <h2 class="theme" id="t1">Polar Bears</h2>
      <div class="group" id="g1">
        <h3 class="question" id="q1">How much does a polar bear weigh?</h3>
        <p class="answer" id="a1">Enough to break the ice.</p>
      <h2 class="theme" id="t2">Pink Elephants</h2>
      <div class="group" id="g2">
        <h3 class="question" id="q2">What kind of beer bottle can you find a pink elephant on?</h3>
        <p class="answer" id="a2">Delirium Tremens.</p>

With a setup like this, I recommend using the classes for styling, and the ids for manipulation in jQuery.

Further Reading

Please take some time to start looking at the jQuery documentation. Oscar Otero also has a really nice table of contents for the docs at his jQuery Cheatsheet.

As a starting point, I recommend looking into these: