Скрыть дочернии элементы при клике

136

10 января 2020, 14:40

Нужно при клике скрыть все дочернии элементы класса tp-revslider-slidesli и показать все дочернии элементы класса tp-revslider-slidesli-2, делал так не получилось:

$('.tparrows').click(function() { 
  $('.tp-revslider-slidesli').children('.tp-parallax-wrap').animate({ 
    width: ["toggle", "swing"], // ширина элемента 
    height: ["toggle", "swing"], // высота элемента 
    opacity: "toggle" // прозрачность элемента 
  }, 1500, "linear"); // продолжительность и скорость анимации 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul class="tp-revslider-mainul"> 
  <li class="tp-revslider-slidesli"> 
    <div class="parallax">Это скрыть</div> 
    <div class="parallax">Это скрыть</div> 
  </li> 
  <li class="tp-revslider-slidesli-2"> 
    <div class="parallax">Это показать</div> 
    <div class="parallax">Это показать</div> 
  </li> 
 
</ul> 
 
<button class="tparrows">Click</button>

Answer 1

$('.tparrows').click(function() { 
  $('.tp-revslider-slidesli').find(".parallax").toggle(500); 
  $('.tp-revslider-slidesli-2').find(".parallax").toggle(500); 
});

.tp-revslider-slidesli-2 .parallax { 
  display:none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul class="tp-revslider-mainul"> 
  <li class="tp-revslider-slidesli"> 
    <div class="parallax">AAA</div> 
    <div class="parallax">BBB</div> 
  </li> 
  <li class="tp-revslider-slidesli-2"> 
    <div class="parallax">CCC</div> 
    <div class="parallax">DDD</div> 
  </li> 
 
</ul> 
 
<button class="tparrows">Click</button>