title: jQuery function to only run on the element clicked
body: <p>I'm trying to implement an accordian style box on some content. However there are 4-6 of these boxes on 1 template, all with different classes for obvious reasons. However I want to try and make the code as easy to read as possible and I don't want to duplicate the code for each class name. I'm assumung jQuerys (this) method would work but i'm not 100% sure how to use it.</p>
  
  <p>Here is my JS code:</p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $(".block-50_hoverHeader").click(function (){
             //alert("clicked");
              $(".scrollText").slideToggle(1000);
  
          });
  
          });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>So the .scrollText class is the div that holds all the content which needs to be displayed after the onClick function. But currently when I click the header all the .scollText divs appear on the page. So i want it to only appear on the parent header div that is being clicked.</p>
  
  <p>Here the HTML:</p>
  
  <pre><code>&lt;div class="block-50 left textHoverWrapOne"&gt;
      &lt;img src="" alt="" /&gt; (Image working as BG Image)
      &lt;div class="block-50_hoverHeader"&gt;&lt;p&gt;This is a header!&lt;/p&gt;&lt;/div&gt;
      &lt;div class="block-50_textHoverOne trans_click scrollText"&gt;
          This is the content that needs to be displayed after the 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>