Как чередовать JQuery переключения слайдов на клике

Question

Я хочу показать два элемента при нажатии, один за другим, когда пользователь нажимает кнопку, отображается первый элемент с классом (.show-element-one), а когда пользователь нажимает ту же кнопку во второй раз,Второй элемент отображается с классом (.show-element-two), я использую код ниже, чтобы показать элемент один при нажатии, но я застрял с показом второго элемента при втором нажатии.

jQuery(document).ready(function() {
  jQuery('#display-elements').click(function() {
    jQuery('.show-element-one,.show-element-two').toggle("slide");
  });
});

Я буду признателен любомугиды, спасибо.

Answer 1

Вы можете установить переменную счетчика, чтобы рассчитать значение модуля для этого, чтобы отображать элемент этих двух классов по кругу.Что-то вроде кода ниже:

jQuery(document).ready(function() {
  var count = 1;
  jQuery('#display-elements').click(function() {
    jQuery('.show-element-one, .show-element-two').hide();
    if (count % 2 !== 0) {
      jQuery('.show-element-one').toggle("slide");
    } else {
      jQuery('.show-element-two').toggle("slide");
    }
    count++;
  });
});

.show-element-one,
.show-element-two {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="display-elements"> Click me </button>
<div class="show-element-one">
  show-element-one
</div>
<div class="show-element-two">show-element-two </div>

Answer 2

Возможно, вам не хватает определения для .slide класса CSS.Попробуйте следующий код.

$(document).ready(function() {
  $('#display-elements').click(function() {
    $('.show-element-one,.show-element-two').toggle("slide");
  });
});

.slide {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="show-element-one">show-element-one</div>
<div class="show-element-two slide">show-element-two</div>

<button id="display-elements">Toggle</button>