1

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

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

введите сюда описание изображения

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

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

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

1 ответ 1

-1

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

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

2
  • 1
    Спасибо за ответ!
    – Karaianov
    22 июл 2020 в 6:37
  • Следует использовать $(".card_btn").on("click", function() {}) вместо $(".card_btn").click(function() {}) в современном jQuery
    – Vasily
    22 июл 2020 в 16:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.