Slide down only one instance when multiple ones have same class
<p>I need to have numerous elements with the SAME class, and content inside them that shows on click, but right now since all of them have the same class, all of them open at once. </p>

<p>How can I make it so that only the clicked one opens up and not others?</p>

<p>My HTML:</p>

<pre><code>&lt;div class="product"&gt;
    &lt;p&gt;&lt;a href="#"&gt;click&lt;/a&gt;&lt;/p&gt;

    &lt;div class="product_inner"&gt;
    &lt;p&gt;show me&lt;/p&gt;
    &lt;/div&gt;

&lt;/div&gt;
    &lt;div class="product"&gt;
    &lt;p&gt;&lt;a href="#"&gt;click&lt;/a&gt;&lt;/p&gt;

    &lt;div class="product_inner"&gt;
    &lt;p&gt;show me&lt;/p&gt;
    &lt;/div&gt;

&lt;/div&gt;
    &lt;div class="product"&gt;
    &lt;p&gt;&lt;a href="#"&gt;click&lt;/a&gt;&lt;/p&gt;

    &lt;div class="product_inner"&gt;
    &lt;p&gt;show me&lt;/p&gt;
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>JQuery:</p>

<pre><code>$(document).ready(function() {
$('.product p a').click(function() {
$('.product_inner').slideToggle(300);
}); // end click

}); // end ready
</code></pre>
