Question

Ok my HTML markup is as follows:

<div class="refine_search_box"> 
    <div class="heading">Refine Search</div>   

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

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

My Jquery is as follows:

$(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();
    });
});

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!

Cheers.

Answer 1

I think you need to use .parent() instead of .prev():

$(".refine_search_box a").click(function (e) {
    var $this = $(this);
    var $div = $this.parent().next();
    $this.toggleClass("selected");
    $div.toggle();
    e.preventDefault();
});

This is assuming that ‘.refine_search_box’ surrounds all of your section_heading divs.

You can also just use .parent().next() as long as your html stays the same.