title: jquery toggle function for every element independently
body: <p>I have many paragraphs and links, which should show/hide every paragraph independently.</p>
  <pre><code>&lt;html&gt;
      
      &lt;head&gt;
          &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js&quot;&gt;
              
          &lt;/script&gt;
          &lt;script&gt;
              $(document).ready(function() {
                  $(&quot;.showtext&quot;).hide();
                  $(&quot;#click&quot;).click(function() {
                      $(&quot;.showtext&quot;).next(&quot;p&quot;).toggle();
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      
      &lt;body&gt; 
          &lt;a href=&quot;#&quot; id=&quot;click&quot;&gt;Click for Show/hide&lt;/a&gt;
  
          &lt;p class=&quot;showtext&quot;&gt;This text will show/hide&lt;/p&gt; &lt;a href=&quot;#&quot; class=&quot;click&quot;&gt;Click for Show/hide&lt;/a&gt;
  
          &lt;p class=&quot;showtext&quot;&gt;This text will show/hide&lt;/p&gt; &lt;a href=&quot;#&quot; class=&quot;click&quot;&gt;Click for Show/hide&lt;/a&gt;
  
          &lt;p class=&quot;showtext&quot;&gt;This text will show/hide&lt;/p&gt; &lt;a href=&quot;#&quot; class=&quot;click&quot;&gt;Click for Show/hide&lt;/a&gt;
  
          &lt;p class=&quot;showtext&quot;&gt;This text will show/hide&lt;/p&gt;...etc dynamicly generated content
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p><strong>EDIT:</strong></p>
  <p>Using $(this) does the job as it's pointing to the click event target.</p>
  <pre><code>click(function() { 
       $(this).toggle();
    });
  </code></pre>