Question

I’m trying to make some div’s visible on mouseover, but the code which I expect should work isn’t working. Perhaps I’m using next() incorrectly? I use the same type of thing successfully elsewhere, so I’m a little unsure what the issue is.

FIDDLE.

Code:

---

$(".clause").mouseenter(function() {

    /* NOT WORKING */
    $(this).next("div.drawer-arrow").css("display","block");
    $(this).next("div.drawerBottom").css("display","block");

    $(".clause").css("border-bottom-right-radius", "0px");
    $(".clause").css("border-bottom-left-radius", "0px");

}).mouseleave(function(){

    /* NOT WORKING */
    $(this).next("div.drawer-arrow").css("display","none");
    $(this).next("div.drawerBottom").css("display","none");

    $(".clause").css("border-bottom-right-radius", "3px");
    $(".clause").css("border-bottom-left-radius", "3px"); 

});

$(".clause").click(function() {
    $(".clause").css("box-shadow", "none");

    /* WORKING */
    var tmp = $(this).next("div.drawer");
    if(tmp.is(":hidden")) {
        tmp.slideDown('2s');
        $(this).css("box-shadow", "0px 3px 5px #AAA");
    }
    else {
        tmp.slideUp('2s');
    }
});

Answer 1

Use the following:

$(this).next().next('.drawer-arrow').css("display","block");
$(this).next().next().next('.drawerBottom').css("display","block");

The extra .next() will select the <div class="drawer"> element, next one more time will get drawer-arrow, then again to get drawerBottom

EDIT:

Dropping through elements with .next() multiple times may be less optimal vs changing markup to group the query sections. You might consider re-structuring the markup so a simpler selector could be used:

<div class="queryGroup">
    <div class="clause">...</div>
    <div class="drawer">...</div>
    <div class="drawer-arrow"></div>
    <div class="drawerBottom"></div>
</div>

The .clause mouseenter event could then be something like:

var $this = $(this); // cache this as a jQuery object

$this.nextAll('.drawer-arrow').show();
$this.nextAll('.drawerBottom').show();

...