Search code examples
jqueryjquery-selectorstoggle

jQuery .next('div') toggle not working

I'm having a problem toggling the visibility of a sibling div using jQuery. What I want to do is show/hide this sibling div when the .detailsbtn link is clicked. If I move the .projdetails divimmediately following the '.detailsbtn' the script works but I need to put it after a 2nd link.

The HTML is structured as follows:

<a href="javascript:void();" id="hp" class="btn btn-info detailsbtn">Project Details</a>
<a href="javascript:void();" class="btn btn-success">Launch Website</a>
<div class="projdetails">This is the hp details</div>

The jQuery is as follows:

$('.projdetails').hide();

$('.detailsbtn').click(function () {
    $(this).next('div').toggle();
});
Solution

  • use .siblings() instead of .next() as next only looks for immediately following sibling

    $(this).siblings('div.projdetails').toggle();

    http://api.jquery.com/siblings/