Can't traverse the DOM with next

Question

I have the following markup

<a class="list-group-item" href="#">
    <div class='row'>
        <div class='col-xs-10 shows-submenu'>
            <h4 class="list-group-item-heading">A title</h4>
        </div>
    </div>
</a>

<div class='list-group-item hidden-group-item hide'>
    <div class="row">
        <div class="col-sm-12">
            <p class="list-group-item-text">
              Some text
            </p>
        </div>
    </div>
</div>

I'd like to remove the 'hide' class in the 'hidden-group-item' when I click the 'shows-submenu'. I was trying to do it with the following jQuery

$(function(){

    $('body').on('click', '.shows-submenu', function() {
      if ($(this).next('.hidden-group-item').hasClass('hide')) {
         $('.hidden-group-item').addClass('hide');
         $(this).next('.hidden-group-item').toggleClass('hide');
      }
      else {
         $(this).next('.hidden-group-item').toggleClass('hide');
      }
      $('.hidden-form-item').addClass('hide');
    });


});

but I can't make it work. The next() method seems to work only if the 'shows-submenu' class is added to the whole a tag but not in the col-xs-10 div where I want it to be.

Could you figure out why is this not working?

Thanks

Answer 1

div.hidden-group-item is not a sibling of .shows-submenu element thus .next() will not work.

You can use .closest() to traverse up ancestor and then use .next()

 var hiddenDiv = $(this).closest('a.list-group-item').next('.hidden-group-item');

You code can also be improved.

 $(function() { $(document).on('click', '.shows-submenu', function() { var hiddenDiv = $(this).closest('a.list-group-item').next('.hidden-group-item'); $('.hidden-form-item').not(this).addClass('hide'); hiddenDiv.toggleClass('hide'); }); }); 

 .hide { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="list-group-item" href="#"> <div class='row'> <div class='col-xs-10 shows-submenu'> <h4 class="list-group-item-heading">A title</h4> </div> </div> </a> <div class='list-group-item hidden-group-item hide'> <div class="row"> <div class="col-sm-12"> <p class="list-group-item-text"> Some text </p> </div> </div> </div> 

Answer 2

Replace the following:

$(this).next('.hidden-group-item')

with

$(this).closest('a').next('.hidden-group-item')

and try again.

Explanation: next() get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector. And hidden-group-item is not the sibling in your html.

Answer 3

Try this:

 $('body').on('click', '.shows-submenu', function() {
      if ($(this).closest(".list-group-item").next('.hidden-group-item').hasClass('hide')) ......

Answer 4

next() method will only work in siblings.

use find() method instead like this.

$.find('.hidden-group-item').toggleClass('hide');