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

Добрый день, у меня на сайте имеется блоки, при клике на которые добавляются классы. Я хочу сделать что бы была следующая тема: при клике на блоки, только один елемент был зелененький, то что уже активное зеленое, оно обратно сворачивалось.
Сложность заключается в том, что нужно обращаться к родителю 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

Я может не правильно донес суть, но надеюсь вы поняли.
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
.
$('.item').click(function() {
    $(this).toggleClass('open')
      .siblings().removeClass('open');
})
https://codepen.io/anon/pen/WMLoez
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы