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

Question

Нужно реализовать появление обратной стороны карточки, при нажатии на кнопку внутри этой конкретной карточки.

Блок с карточками выглядит вот так:

При нажатии на кнопку "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.

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

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

Answer 1

Вы можете воспользоваться методом closest() для того что бы манипулировать именно тем элементом который Вам нужен:

const handleClick = event => {
   const card = event.target.closest(".item").querySelector(".card_more")
   card.classList.add("show")
}

const btn = document.querySelectorAll(".card_btn")

for (var i = 0; i < btn.length; i++) {
    btn[i].addEventListener("click", handleClick, false)
}

.card_more {
  display: none;
}

.card_more.show {
  display: initial;
}

<div class="item">
  <h4>1. 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>DETAILS FOR ONE</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>

<div class="item">
  <h4>2. 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>DETAILS FOR TWO</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>

Answer 2

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

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

БЛОГ НА HUSL

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

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