Cant find the next element using jQuery
<p>Ok my HTML markup is as follows:</p>

<pre><code>&lt;div class="refine_search_box"&gt; 
    &lt;div class="heading"&gt;Refine Search&lt;/div&gt;   

    &lt;div class="section_heading"&gt;&lt;a href="#"&gt;By Size&lt;/a&gt;&lt;/div&gt;
    &lt;div class="section"&gt;
            @Html.DropDownListFor(m =&gt; m.Size, new SelectList(Model.SizeList, "key", "value", Model.Size), "")
    &lt;/div&gt;

    &lt;div class="section_heading"&gt;&lt;a href="#"&gt;By Sport&lt;/a&gt;&lt;/div&gt;
    &lt;div class="section"&gt;
            @Html.DropDownListFor(m =&gt; m.Sport, new SelectList(Model.SportList, "key", "value", Model.Sport), "")
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My Jquery is as follows:</p>

<pre><code>$(document).ready(function () {
    $("div.section").toggle();

    $(".refine_search_box a").click(function (e) {
        var $this = $(this);
        var $div = $this.prev().nextAll(".section").first();
        $this.toggleClass("selected");
        $div.toggle();
        e.preventDefault();
    });
});
</code></pre>

<p>What I want to happen is when the link in the .section_heading is clicked I want the .section div to open thats directly after it. But my jQuery always returns nothing for $div, I thought this would be quite simple but I'm obviously missing something obvious. I'm very new to jQuery so apologise if its stupidly simple!</p>

<p>Cheers.</p>
