title: Single jQuery function to toggle multiple elements individually
body: <p>I need a single jQuery function that can be re-used to toggle multiple elements individually. The code example on the jQuery page at <a href="http://api.jquery.com/slidetoggle/" rel="noreferrer">http://api.jquery.com/slidetoggle/</a> works well for a single element using a button but not for multiple elements using non-button elements.</p>
  
  <p>My code (adapted from the jQuery slidetoggle example):</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;slideToggle demo&lt;/title&gt;
  &lt;script src="http://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="first"&gt;Toggle first&lt;/div&gt;
      &lt;p class="first"&gt;First hidden paragraph.&lt;/p&gt;
  &lt;div class="second"&gt;Toggle second&lt;/div&gt;
      &lt;p class="second"&gt;Second hidden paragraph.&lt;/p&gt;
  
  &lt;script&gt;
  $( "div.first" ).click(function() {
  $( "p.first" ).slideToggle(0);
  });
  &lt;/script&gt;
  
  &lt;script&gt;
  $( "div.second" ).click(function() {
  $( "p.second" ).slideToggle(0);
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The code allows each  element to be toggled individually which is what I want. However, there are two problems with my code:</p>
  
  <ol>
  <li><p>It is repetitive and inefficient in that a new script needs to be written for each element that I wish to make toggleable (I would prefer a single function that would toggle any element of a particular class name).</p></li>
  <li><p>By default, the page is displayed with all elements displaying in full. I would prefer to have the toggleable elements hidden by default.</p></li>
  </ol>
  
  <p>I have been unable to find a straightforward solution which addresses both issues. Any help would be appreciated.</p>