Stack Overflow на русском Asked by Karaianov on November 13, 2021
Нужно реализовать появление обратной стороны карточки, при нажатии на кнопку внутри этой конкретной карточки.
Блок с карточками выглядит вот так:
При нажатии на кнопку "Know More" у этой карточки должен появляться блок с подробной информацией.
Код прилагаю:
<div class="item">
<h4>DESIGNING IS THE COOL</h4>
<p>Our most popular service is our Virtual Receptionist. We know that ...</p>
<span class="card_btn">Know More <i class="fas fa-arrow-right"></i></span>
<div class="card_more">
<h4>DESIGNING IS THE COOL LOVE FOR</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt repudiandae autem omnis, deleniti eos laudantium iste quia architecto corrupti ad cupiditate, blanditiis iusto placeat libero cum similique dolore officiis consequuntur.</p>
<span class="card_exit"><i class="fas fa-times"></i></span>
</div>
</div>
При нажатии на кнопку с классом know_more
, должен появляться блок с классом card_more.
Сложность состоит в том, что не понятно как реализовать появление блока у конкретной карточки, а не у всех сразу.
Буду очень признателен за помощь!
Ну можно например вот так просто ^ - ^
$(".card_btn").click(function() {
const cardContent = $(this).parent();
const cardMore = $(cardContent).next();
$(cardContent).addClass("hidden");
$(cardMore).removeClass("hidden");
$(".card_exit").click(() => {
$(cardMore).addClass("hidden");
$(cardContent).removeClass("hidden");
})
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
<div class="card_content">
<h4>DESIGNING IS THE COOL</h4>
<p>
Our most popular service is our Virtual Receptionist. We know that...
</p>
<span class="card_btn">Know More <i class="fas fa-arrow-right"></i> </span>
</div>
<div class="card_more hidden">
<h4>DESIGNING IS THE COOL LOVE FOR</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt repudiandae autem omnis, deleniti eos laudantium iste quia architecto corrupti ad cupiditate, blanditiis iusto placeat libero cum similique dolore officiis consequuntur.</p>
<span class="card_exit">Return Back<i class="fas fa-times"></i></span>
</div>
</div>
Answered by GGO on November 13, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP