How to switch jQuery classes?

Question

JavaScript

Good afternoon, I have blocks on my site that, when clicked, add classes. I want to make the following topic: when you click on the blocks, only one element was green, then what is already active green, it folded back.
The difficulty lies in the fact that you need to access the item parent and its two children.

<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

I may not have conveyed the essence correctly, but I hope you understand.

Answer 1

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

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