Question

I a building a simple FAQ page on my site. I’d like the question only to be visible, and once the user clicks on the question it should then show the answer. for some reason my code isn’t working. Please review my code and tell me what I am doing wrong.

html

<div class="copy" id="about1">
        <h1>The Mission</h1>
        <p>
            content content content

            content content content

            content content content

        </p>

  <h1>The Game</h1>
        <p>
            content content content

            content content content

            content content content

        </p>
 </div>

JS

$(document).ready(function() {
    $('.copy h1').onclick(function(){
          $('.copy p').hide();
        $('this').next('p').show();
    });
});

CSS

.copy p{
  display=none;
}

Answer 1

Two issues. First, in your JS, you’ve made two mistakes — onclick() should be click(), and you’ve wrapped this in single-quotes. It should read:

$(document).ready(function() {
    $('.copy h1').click(function(){
      $('.copy p').hide();
      $(this).next('p').show();
    });
});

Second, in your CSS, the separator between keys and values should be a colon:

.copy p {
    display: none;
}