title: Hide a page section then reveal it when a link is clicked- JQuery
body: <p>I have a question within a page and I want the user to be able to be able to have a go answering before the answer is revealed. So they have two options. one link to show some clues and ideas and one link to show the completed conclusion. firstly I tried setting the original property to not display the section then using .show() to reveal it but that wasn't working. Then I had some already working code with a similar purpose so tried using the .addClass method instead. That didn't work either so I assume it must be my links or something I just can't see because I am new to JQuery. Any advice would be much appreciated! Here's my code:</p>
  
  <pre><code>    &lt;section id="page6section2"&gt;&lt;div class="page-header"&gt;&lt;h1&gt;Some Ideas&lt;/h1&gt;&lt;/div&gt;
      &lt;section id="page6section3"&gt;&lt;div class="page-header"&gt;&lt;h1&gt;Conclusion&lt;/h1&gt;&lt;/div&gt;
  
      &lt;p&gt;&lt;a href="#page6section2" id="someideas"&gt;Click here for some clues and ideas!&lt;/a&gt;
      &lt;/p&gt;
      &lt;p&gt;&lt;a href="#page6section3" id="conclusion"&gt;Click here for the conclusion!&lt;/a&gt;
  </code></pre>
  
  <p></p> </p>
  
  <pre><code>    .hidesection2 {display: none;}
      .hidesection3 {display: none;}  
  
  
  
      $(function() {
      $('#page6section2').addClass('hidesection2');});
      jQuery('#someideas').click(function(){
      jQuery('#page6section2').removeClass('hidesection2'); });
      $(function() {
      $('#page6section3').addClass('hidesection3');});
      jQuery('#conclusion').click(function(){
      jQuery('#page6section3').removeClass('hidesection3'); });
  </code></pre>
  
  <p>I'm sure there is probably an easier and more condensed way to do it too.</p>