jQuery .slideToggle won't work depending on specificity
<p>I'm using jQuery to hide/show content and it works, but not the way I want it to.
The hierarchy of my elements is as follows:</p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="column"&gt;
        &lt;a href=""&gt;Show/Hide&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="column hide-id"&gt;blahblahblah&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here's the code:</p>

<pre><code>$(document).ready(function(){   
    $('.hide-id').hide();
    $('.column &gt; a').click(function() {
        $('.hide-id').slideToggle(500);
            return false;
        });
    });
});
</code></pre>

<p>The problem lies with:</p>

<pre><code>$('.hide-id').slideToggle(500);
</code></pre>

<p>It works properly, but I have this "hide-id" class repeated several times, which means every time I click on ".column a", every single div with "hide-id" shows instead of the individual one I'm clicking.</p>

<p>I tried variations of it like:</p>

<pre><code>$(this).parent().next().slideToggle(500);
this = .column a + .parent() = .column + .next() = .column that contains .hide-id
</code></pre>

<p>But, when I change <code>.slideToggle</code> from <code>.hide-id</code> to something else that should work, the script responds like my selector is invalid, because it doesn't respond at all.</p>

<p>Is there a way to make <code>$('.hide-id').slideToggle(500);</code> work or do I need to find an alternative? I already tried applying .each to it, but I either didn't do it properly or it just doesn't work.</p>
