Multiple classnames - how to find only the next immediate one?
<p>I have 3 expand divs with the same strcuture. Something like:</p>

<pre><code>&lt;div class="expand"&gt;
    &lt;h3 class="more"&gt;Click to expand&lt;/h3&gt;
    &lt;div class="wrapper"&gt;Iasdfgh qwerty zxcvbn&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Jquery </p>

<pre><code>$(document).ready(function(){
    var toggleButton = $('.expand h3.more');
    var expandWrap = $(toggleButton).next('.wrapper');
    $(toggleButton).click(function(){
        if ($(expandWrap).is('.closed')) {
            $(toggleButton).removeClass('closed');
            $(expandWrap)
                .removeClass('closed')
                .slideDown('slow');

        } else {
            $(expandWrap)
                $(expandWrap).slideUp('slow', function(){
                    $(this).addClass('closed');
                    $(toggleButton).addClass('closed');
                });
        }
    });
});
</code></pre>

<p>Right now when I click on the "Click to expand" <code>h3</code>, all <code>.wrapper</code> slides up and down. How can I only target the next immediate <code>.wrapper</code> so only one toggles at a time?</p>
