Как заменить контент по клику?

Question

[1canada]

Есть айтем, в нем есть кнопка, которая должна менять контент.


Заменить:

<div class="catalog__content">
<div class="catalog__image"><img src="img/catalog/clock.png" alt=""></div>
<div class="catalog__name"><h3>Пульсометр Polar FT1</h3></div>
<div class="catalog__description"><p>Для первых шагов в тренировках основанных на сердечном ритме</p></div>
<div class="catalog__link"><a href="#">Подробнее</a></div>
<div class="catalog__footer">
<div class="catalog__price">
<div class="catalog__price-old"><strike>4 750 руб.</strike></div>
<div class="catalog__price-new"><span>4 500 руб.</span></div>
</div>
<div class="catalog__button"><button class="catalog__btn-price btn">Купить</button></div>
</div>

На:

<div class="catalog__content-back">
<ul class="catalog__features-list">
<li>Вы услышите звуковое оповещение о нужном пульсе во время тренировки;</li>
<li>Вы увидите информативный графический индикатор целевых тренировочных зон пульса;</li>
<li>Также Вы увидите информацию о расходе калорий за тренировку;</li>
<li>Вы сможете посмотреть данные по 10 тренировкам.</li>
</ul>
<div class="catalog__link"><a href="#">Назад</a></div>
</div>

Answer 1

[historydev]

Готовое не дам, а вот при помощи этого вы добьётесь нужного результата:

1. Event target
2. onclick
3. querySelector

Answer 2

[LJ322]

Добавьте соответствующие модификаторы для блоков и добавляйте/удаляйте их через обработчик: https://developer.mozilla.org/ru/docs/Web/API/Even...

Answer 3

[Евгений Щербаков]

Можете сразу оба блока положить в карточку, но у одного будет display: block, а у другого display: none и по нажатию на "Подробнее"/"Назад" просто меня их на "противоположное" значение.

Или вместо этого можете поиграться с анимацией opacity и будет плавно появляться/скрываться.