title: Issue with Show/Hide function in jQuery. Jumps to top of page
body: <p>I'm using the click/hide function for my questions and answers page. But when I click on the question to show the answer it jumps back up to the top. What do I need to do to get this to stop.</p>
  
  <p>This is my coding: </p>
  
  <p>Script: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function() {
  jQuery(".sub").hide();
  //toggle the componenet with class msg_body
  jQuery(".cthrough").click(function()
  {
  jQuery(this).next(".sub").slideToggle(500);
  });});
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.cthrough {
      display: inline-block;
      font-size: 15px;
      font-family: 'Anaheim', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0px;
  }
  
  .sub {
      display: inline-block;
      font-size: 13px;
      padding-left: 10px;
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;a href="#" class="cthrough"&gt;This is my question&lt;/a&gt;
  &lt;div class="sub"&gt;
      This is my answer.
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried converting the a href=# to just a div class but that doesn't make the question clickable. I also tried taking the # out but that didn't help either.</p>