Jquery hide and show
<p>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.</p>

<p><strong>html</strong></p>

<pre><code>&lt;div class="copy" id="about1"&gt;
        &lt;h1&gt;The Mission&lt;/h1&gt;
        &lt;p&gt;
            content content content

            content content content

            content content content

        &lt;/p&gt;

  &lt;h1&gt;The Game&lt;/h1&gt;
        &lt;p&gt;
            content content content

            content content content

            content content content

        &lt;/p&gt;
 &lt;/div&gt;
</code></pre>

<p><strong>JS</strong></p>

<pre><code>$(document).ready(function() {
    $('.copy h1').onclick(function(){
          $('.copy p').hide();
        $('this').next('p').show();
    });
});
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.copy p{
  display=none;
}
</code></pre>
