Показать/скрыть блоки по клику через slideToggle

Question

Столкнулся с проблемой, как по клику на кнопку показывать и скрывать ДВА дива в контейнере через slideToggle? При том что контейнеров может быть бесчисленное количество и привязку по ID не реализовать.

<div class="container">
    <div class="stroke one"><a href="#" class="w-button">Button Text</a></div>
    <div class="stroke two"></div>
    <div class="stroke three"></div>
</div>

<style>
.stroke.two,
.stroke.three {
  display:none;
}
</style>

Answer 1

$('.container .one a').click(function(e) {
  $('.container').not($(this).closest('.container')).find('.two, .three').hide();
  $(this).closest('.container').find('.two, .three').toggle();
});

.stroke.two,
.stroke.three {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="stroke one"><a href="#" class="w-button">Button Text</a></div>
  <div class="stroke two">Two</div>
  <div class="stroke three">Three</div>
</div>

<div class="container">
  <div class="stroke one"><a href="#" class="w-button">Button Text</a></div>
  <div class="stroke two">Two</div>
  <div class="stroke three">Three</div>
</div>

БЛОГ НА HUSL

Показать/скрыть блоки по клику через slideToggle

Ответы (1 шт):