@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. Затем пробовал заменить с помощью JQuary, при нажатии кнопки классы блоков, пробовал изменять прозрачность, свойство 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');
  });
});


Может я изначально не правильно начал решать эту проблему, прошу более опытных людей сказать - а как сделали бы вы, готовое решение мне не надо, нужны идеи, чтобы я поковырялся в этом.

Заранее всем спасибо, извините если много букв)
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
l3ftoverz
@l3ftoverz
Люблю front-end
должно скрыться краткое описание и появиться подробная информация

Кому как, а я не понял где там краткое описание.

Скрывать блок через display: none не лучшее решение.
Как вариант - сделать 2 блока в контейнере, один краткое описание, второй - полное. Сделать изначально полное описание с высотой 0px или выдирать его из потока и кидать куда-то за вюпорт. При клике делать обратное, один показать - убрать другой.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
13 дек. 2018, в 22:52
5000 руб./за проект
13 дек. 2018, в 21:54
5000 руб./за проект
13 дек. 2018, в 21:32
1000 руб./за проект