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