Silde up / down
<p>I have this markup</p>

<pre><code>&lt;div id="content" &gt;
      &lt;h1&gt;&lt;a href="#"&gt;Sample 1&lt;/a&gt;&lt;/h1&gt;
      &lt;img src="" alt="sample 1" /&gt;

       &lt;h1&gt;&lt;a href="#"&gt;Sample 2&lt;/a&gt;&lt;/h1&gt;
      &lt;img src="" alt="sample 2" /&gt;

       &lt;h1&gt;&lt;a href="#"&gt;Sample 3&lt;/a&gt;&lt;/h1&gt;
      &lt;img src="" alt="sample 3" /&gt;

       &lt;h1&gt;&lt;a href="#"&gt;Sample 4&lt;/a&gt;&lt;/h1&gt;
      &lt;img src="" alt="sample 4" /&gt;
&lt;/div&gt;
</code></pre>

<p>I want that all images hide when the page loads, then when I click on every "h1", its image slide down and when I click on it again, it slides up.
1- consider that I do not want all images slide down and up when I click on a "h1", just the related image slides up and down.</p>

<p>help me please</p>
