Функция Jquery для описания категории продукта «подробнее» не работает должным образом

Question

Для моего проекта есть ссылка http://inubia -projekt.dkonto.pl / product-category / sukienki / sukienki-wieczorowe /

Чего я хочу достичь, это когда вы нажимаетена "Czytaj więcej" текст будет заменен на "Zwiń opis". Я также хочу прикрепить функцию на втором клике («Zwiń opis»), который снова сделает текст коротким. Я новичок в jquery и javascript, поэтому мне нужна помощь с этим. Код, который я сделал, работает только для расширения текста одним способом.

Вот код:

HTML:

<div id="read-more"><span>Czytaj więcej</span><span>Zwiń opis</span></div>

CSS:

#read-more span:last-child {
    display: none;
}

.visible {
    display: block !important;
}

.not-visible {
    display: none !important;
}

.visible-desc {
    max-height: 100% !important;
}

.term-description {
    max-height: 65px;
    overflow: hidden;
   margin-bottom: 20px
}

jQuery

jQuery(document).ready(function( $ ){
   $(function() {
  $("#read-more span:first-child").click(function() {
    $(".term-description").addClass('visible-desc');
    $("#read-more span:first-child").addClass('not-visible');
    $("#read-more span:last-child").addClass('visible');
  });
});
});

Answer 1

Просто внесите несколько изменений в свой Jquery, вместо использования addClass / removeClass используйте toggleClass:

jQuery(document).ready(function( $ ){
   $(function() {
      $("#read-more").click(function() {
          $(".term-description").toggleClass('visible-desc');
          $("#read-more span:first-child").toggleClass('not-visible');
          $("#read-more span:last-child").toggleClass('visible');
      });
   });
});