title: Jquery Slidetoggle multiple sliding divs
body: <p>I have been browsing for a fair while and I am still to find a relevant answer. I am wanting my hidden divs that are all the same class to slidetoggle, but when one slides the other that is open closes. Also I am wanting the Show Information/Hide information only to change for the div that is being toggled.</p>
  
  <p>Here is my html</p>
  
  <pre><code>&lt;p&gt;
      &lt;a class="opener" href="javascript:slideTogle();"&gt;Click Here For Information&lt;/a&gt;
  &lt;/p&gt;
  &lt;div class="content"&gt;
      &lt;p&gt;If you are looking to purchase your first home, reduce your existing monthly
          repayments, pay off you mortgage early, raise cash for home improvements
          or to pay off debt or even buy a property to let out we are able to assist
          and advise you from start to finish. We have access to a wide range of
          lenders offering independent mortgages to suit you.&lt;/p&gt;
      &lt;p&gt;Your home may be repossessed if you do not keep up repayments on your
          mortgage.&lt;/p&gt;
      &lt;ul&gt;
          &lt;li&gt;First time Buyers&lt;/li&gt;
          &lt;li&gt;Remortgages&lt;/li&gt;
          &lt;li&gt;Capital raising&lt;/li&gt;
          &lt;li&gt;Debt Consolidation&lt;/li&gt;
          &lt;li&gt;Buy To Let&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is my javascript</p>
  
  <pre><code>$(document).ready(function () {
      // put all your jQuery goodness in here.
      $('.content').hide();
      $('.content.open').show();
  
      $('.opener').click(function () {
  
  
          $(this).parent().next('.content').slideToggle(300, function () {
              $(".opener").text($(this).is(':visible') ? "Hide Information" : "Click Here For Information");
          });
      });
  });
  </code></pre>
  
  <p>I am new to jquery/javascript but I have a basic knowledge of php and a good knowledge of html/css.</p>
  
  <p>thanks</p>