Как сделать, чтобы открытая выпадашка закрывалась при открытии следующей?

Question

[pashabomber]

Добрый день!

На сайте есть такой блок:

<div class="item">открыть</div>
<div class="sub">выпадашка 1</div>
<div class="item">открыть</div>
<div class="sub">выпадашка 2</div>

По умолчанию блоки с классом "sub" скрыты. По клику на "item" следующему блоку "sub" добавляется доп-класс, с которым выпадашка становится видна:

$('.item').click(function() {
            $(this).next('.sub').toggleClass('opened');
        });

Задача в том, чтобы, если мы открыли одну из выпадашек, а после этого открываем другую - первая должна обратно закрыть (убирается класс opened).

Заранее спасибо!

Answer 1

[IceJOKER]

$('.item').click(function() {
     $('.opened').removeClass('opened');
     $(this).next('.sub').toggleClass('opened');
});

Comments

[pashabomber]

спасибо!

Answer 2

[Роман Макаров]

$('.item').click(function() {
            $('.sub').removeClass('opened');
            $(this).next('.sub').toggleClass('opened');
        });

Answer 3

[GreatRash]

$('.item').on('click', function(e) {
  var $this = $(this).next('.sub');
  
  $('.sub').not($this).removeClass('opened');
  $this.toggleClass('opened');
});

codepen.io/GreatRash/pen/wWAOLW