Как переключать классы JQuery?

Question

[Артем Пономарев]

Добрый день, у меня на сайте имеется блоки, при клике на которые добавляются классы. Я хочу сделать что бы была следующая тема: при клике на блоки, только один елемент был зелененький, то что уже активное зеленое, оно обратно сворачивалось.
Сложность заключается в том, что нужно обращаться к родителю item и его двум дочерним элементам.

<div class="item">
  <div class="wrapper-hidden"></div>
  <div class="wrapper"></div>
</div>
<div class="item">
  <div class="wrapper-hidden"></div>
  <div class="wrapper"></div>
</div>
<div class="item">
  <div class="wrapper-hidden"></div>
  <div class="wrapper"></div>
</div>

.item {
   width: 300px;
   height: 300px;
   position: relative;
   overflow: hidden;
  float: left;
  margin: 20px
}
.wrapper {
   height: inherit;
   width: inherit;
   background-color: red;
   position: absolute;
   top: 0;
   transition: 0.3s;
}
.wrapper-hidden {
   height: inherit;
   width: inherit;
   position: absolute;
   background: green;
   transition: 0.3s;
   top: -300px;
}

.open1 {top: 0px}
.open2 {top: 300px}

$(function() {
   $(".item").click(function() {
      $(this).find(".wrapper").toggleClass("open2");
      $(this).find(".wrapper-hidden").toggleClass("open1");      
  })
});

https://codepen.io/lovipomidorku/pen/qxLaBQ

Я может не правильно донес суть, но надеюсь вы поняли.

Answer 1

[Stalker_RED]

$('.item').click(function() {
    $(this).toggleClass('open')
      .siblings().removeClass('open');
})

https://codepen.io/anon/pen/WMLoez

Comments

[Артем Пономарев]

спасибо за решение) как раз то что нужно.