jquery анимация не работает при первом нажатии

Question

Пытаюсь реализовать кнопку Подробнее с анимацией. Анимация работает нормально после первого щелчка, но при первом щелчке кажется, что метод анимации не учитывается.

JSFiddle ссылка на приведенный ниже код .

Вот мой код:

var text = $('.content')
const originalHeight = text.height();

$(".show-more a").on("click", function() {
  var $this = $(this);
  var $content = $this.parent().prev("div.content");
  var linkText = $this.text().toUpperCase();
  var fullHeight = text[0].scrollHeight;

  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.addClass('showContent').removeClass('hideContent');
    text.animate({
      'height': fullHeight
    });
  } else {
    linkText = "Show more";
    $content.addClass('hideContent').removeClass('showContent');
    text.animate({
      'height': originalHeight
    });
  };

  $this.text(linkText);
});

div.text-container {
  margin: 0 auto;
  width: 75%;
}

.hideContent {
  overflow: hidden;
  line-height: 1em;
  height: 2em;
}

.showContent {
  line-height: 1em;
  height: auto;
}

.content {
  text-align: justify;
}

.show-more {
  text-align: center;
  display: inline;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-container">
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>

Answer 1

попробуйте это:

var text = $('.content')
const originalHeight = text.height();

//======================
//add this line

 text.css("height",originalHeight );

//======================


$(".show-more a").on("click", function() {
  var $this = $(this);
  var $content = $this.parent().prev("div.content");
  var linkText = $this.text().toUpperCase();
  var fullHeight = text[0].scrollHeight;

  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.addClass('showContent').removeClass('hideContent');
    text.animate({
      'height': fullHeight
    });
  } else {
    linkText = "Show more";
    $content.addClass('hideContent').removeClass('showContent');
    text.animate({
      'height': originalHeight
    });
  };

  $this.text(linkText);
});

div.text-container {
  margin: 0 auto;
  width: 75%;
transition: all 0.15s ease-out;
}

.hideContent {
  overflow: hidden;
  line-height: 1em;
  height: 2em;
}

.showContent {
  line-height: 1em;
  height: auto;
}

.content {
  text-align: justify;
}

.show-more {
  text-align: center;
  display: inline;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-container">
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>

Answer 2

Javascript === - сравнение с учетом регистра. Ваш код - if (linkText === "SHOW MORE"), а ваш основной текст - Показать еще . Вот и все.