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

Question

[Максим]

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

<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');
  });
});

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

Comments

[Алексей]

Обычно я делаю класс hidden и применяю его к контенту который не должно быть видно.
А потом через JS

let classList = element.classLisct;
classList.add('className') //Добавить
classList.remove('className') //Удалить
classList.contains('className') //Есть ли класс