Как скрыть один блок и отобразить другой?

Question

Хочу сделать, чтобы при нажатии на кнопку скрывался текущий блок и на его месте отображался следующий и наоборот.

const part = '.part';
const part_active = 'part_active';
const button = '.button';

$(button).on('click', function() {
  $(this).parent(part).removeClass(part_active);
  $(this).parent(part).addClass(part_active);
})

.wrapper {
  width: 400px;
  border: 1px solid #ccc;
}

.part {
  display: none;
  width: 340px;
  margin: 20px auto 10px;
  text-align: center;
}

.part_active {
  display: block;
}

.button {
  background: #444;
  border: none;
  padding: 15px 10px;
  color: #fff;
  cursor: pointer;
  &:hover {
    background: #ccc;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="part part_active">
    <img src="https://picsum.photos/id/1002/340/250" alt="">
    <button class="button">Next image</button>
  </div>
  <div class="part">
    <img src="https://picsum.photos/340/250" alt="">
    <button class="button">Prev image</button>
  </div>
</div>

Answer 1

const part = '.part';
const part_active = 'part_active';
const button = '.button';

$(button).on('click', function() {
  $(this).parent(part).removeClass(part_active);
  var next = $(this).parent(part).next(part);
  if (next.length == 0)
    next = $(this).closest('.wrapper').find('.part').eq(0);
  next.addClass(part_active);
});

.wrapper {
  width: 400px;
  border: 1px solid #ccc;
}

.part {
  display: none;
  width: 340px;
  margin: 20px auto 10px;
  text-align: center;
}

.part_active {
  display: block;
}

.button {
  background: #444;
  border: none;
  padding: 15px 10px;
  color: #fff;
  cursor: pointer;
  &:hover {
    background: #ccc;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="part part_active">
    <img src="https://picsum.photos/id/1002/340/250" alt="">
    <button class="button">Next image</button>
  </div>
  <div class="part">
    <img src="https://picsum.photos/340/250" alt="">
    <button class="button">Prev image</button>
  </div>
</div>

Answer 2

$('.button').on('click', function() {
  let $parts = $(this).closest('.wrapper').find('.part');
  $parts.toggleClass('part_active');
});

.wrapper {
  width: 400px;
  border: 1px solid #ccc;
}

.part {
  display: none;
  width: 340px;
  margin: 20px auto 10px;
  text-align: center;
}

.part_active {
  display: block;
}

.button {
  background: #444;
  border: none;
  padding: 15px 10px;
  color: #fff;
  cursor: pointer;
  &:hover {
    background: #ccc;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="part part_active">
    <img src="https://picsum.photos/id/1002/340/250" alt="">
    <button class="button">Next image</button>
  </div>
  <div class="part">
    <img src="https://picsum.photos/340/250" alt="">
    <button class="button">Prev image</button>
  </div>
</div>

P.s. Если хотите сделать код универсальным, можно вместо настройки классов, именно через JS предоставлять классы, которые нужно добавить в HTML, чтобы код работал (легче будет их потом запомнить и сразу распознать);

БЛОГ НА HUSL

Как скрыть один блок и отобразить другой?

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