show hide content (wikipedia style)
<p>I've a lot of titles on my page (h1) and I want to add a "show/hide" function just after each title in order to show the SPECIFIC content that follows, without having to add manualy an id for each content and title.</p>

<p>I'm pretty new to jquery and thats what I've done so far. As you'll notice, the problem is that every div is being showed/hiden.</p>

<p>jQuery code:</p>

<pre><code>$(document).ready(function(){
  $(&amp;quot;h1&amp;quot;).append(' [&amp;lt;a class=&amp;quot;show-hide&amp;quot;&amp;gt;Show/Hide&amp;lt;/a&amp;gt;]');
  $(&amp;quot;.show-hide&amp;quot;).click(function(){
    $(&amp;quot;div&amp;quot;).slideToggle(&amp;quot;normal&amp;quot;);
  })
});
</code></pre>

<p>And the HTML code:</p>

<pre><code>&lt;h1&gt;Title 1&lt;/h1&gt;
&lt;div&gt;Content 1&lt;/div&gt;
&lt;h1&gt;Title 2&lt;/h1&gt;
&lt;div&gt;Content 2&lt;/div&gt;
&lt;h1&gt;Title 3&lt;/h1&gt;
&lt;div&gt;Content 3&lt;/div&gt;
</code></pre>

<p>And it woul look like this:</p>

<pre><code>Title 1 [Show/Hide]
Content 1
Title 2 [Show/Hide]
Content 2
Title 3 [Show/Hide]
Content 3
</code></pre>
