@Rodiyz

Как скрыть блок с текстом на картинке и сделать видимым другой?

Дана галерея с работами, при нажатии кнопки "Know more" должно скрыться краткое описание и появиться подробная информация (фон подробной информации полупрозрачный, поэтому краткое описание надо скрыть полностью).

5c08cc615e22e342937524.jpeg

<div class="service-content">
      <div class="service-content__item item__1">
        <img src="img/service-content-img1.png" alt="">
        <div class="service-content__visible">
          <h4 class="content-headline__visible">Designing is The Cool FOR</h4>
          <p class="content-text__visible">Our most popular service is our we know that sometimes it’s something and you middle most..</p>
          <a class="content-more__visible"><span>Know More</span><span class="icon-Rectangle_18_copy_6"></span></a>
        </div>
        <div class="service-content__hidden">
          <h4 class="content-headline__hidden">Designing is The CooL LOVE FOR.</h4>
          <p class="content-text__hidden">Our most popular service is our Virtual Receptionist. We know that sometimes it’s something and you middle most this job was posted less than five minutes ago, and we think it’s a good match for you. If you submit a proposal now, you’ll be one of the first candidates. You may even catch the client while they’re still online.</p>
        </div>
      </div>


Сделал два блока, один с кратким описанием и кнопкой "Know more", другой с подробной информацией и скрыл его через display: none. Затем пробовал заменить с помощью JQuery, при нажатии кнопки классы блоков, пробовал изменять прозрачность, свойство display, но что-то удается скрыть краткую информацию, но при этом не появляется блок с подробной.

$(document).ready(function(){
  $('.content-more__visible').on('click', function(e) {
    e.preventDefault;
    $('.service-content__hidden').toggleClass('service-content__vis');
    $('.service-content__visible').toggleClass('service-content__none');
  });
});


Может я изначально неправильно начал решать эту проблему. Как это сделать правильно?
  • Вопрос задан
  • 94 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы