TransWikia.com

Показать блок c информацией по клику JS

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.

Сложность состоит в том, что не понятно как реализовать появление блока у конкретной карточки, а не у всех сразу.

Буду очень признателен за помощь!

One Answer

Ну можно например вот так просто ^ - ^

$(".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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP