jquery animate not working on first click

user_6202039 0
Viewed 107

I'm trying to implement Read More button with animation. Animation working fine after the first click but on the first click, it seems that the animation method doesn't come into consideration.

JSFiddle link for the below code.

Here is my code: 

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>

css html jquery javascript
2 Answers

try this:

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>

user_112224330

Javascript === is a case sensitive comparison. Your code is if (linkText === "SHOW MORE") where your main text is Show more. Thats all.

user_47009220
Related