How to make animation to show the rest of the paragraph?

Question

I have a paragraph and I would like to show the rest of it when I click on "Details", but I want an animation down showing the rest of the content.

Paragraph that will appear:

Lorem Ipsum is Simply dummy text of the Printing and typesetting Industry. Lorem Ipsum has been the... 'details'

Whole paragraph:

"Lorem Ipsum is Simply dummy text of the Printing and typesetting Industry. Lorem Ipsum has been the Industry’s standard dummy text Ever Since "

How to, when clicking on "details" the rest of the paragraph appears with an animation?

Answer 1

A good way to display / hide would be using toggle

$('#detalhes').click(function(){
    $('.minhaDiv').slideToggle(400);
});

Where 400 is the time in ms of animation;

Or you can use the Animate:

$('#detalhes').click(function(){
    $('.minhaDiv').animate({"height" : "altura que deve ficar"}, 400);
});

Answer 2

Based on the example of CSS Tricks, another way is to delimit the size of the paragraph that will be displayed, leaving a gradient color at the end of it to give the feel of descent in read-more.

var $el, $ps, $up, totalHeight;

$(".box .button").click(function() {

  totalHeight = 0

  $el = $(this);
  $p = $el.parent();
  $up = $p.parent();
  $ps = $up.find("p:not('.read-more')");

  $ps.each(function() {
    totalHeight += $(this).outerHeight();
  });

  $up
    .css({
      "height": $up.height(),
      "max-height": 9999
    })
    .animate({
      "height": totalHeight
    });

  $p.fadeOut();

  return false;

});

.box {
  max-height: 120px;
  position: relative;
  overflow: hidden;
}
.box .leia-mais {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 30px 0;
  
  background-image: linear-gradient(to bottom, transparent, gray);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <p>Praesent in mauris eu tortor porttitor accumsan. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aenean fermentum risus id tortor. Integer imperdiet lectus quis justo. Integer tempor. Vivamus
    ac urna vel leo pretium faucibus. Mauris elementum mauris vitae tortor. In dapibus augue non sapien. Aliquam ante. Curabitur bibendum justo non orci. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum
    suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris dictum
    facilisis augue. Fusce tellus. Pellentesque arcu. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Mauris dolor felis, sagittis
    at, luctus sed, aliquam non, tellus. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu, urna. Nullam at arcu a est sollicitudin euismod. Praesent dapibus. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget
    facilisis enim ipsum id lacus. Nam sed tellus id magna elementum tincidunt.
  </p>
  <p class="leia-mais"><a href="#" class="button">Read More</a>
  </p>
</div>

Answer 3

You can select the element and use .slideDown() to show it, or .slideToggle() if you want to show and hide on the same button.

$("#paragrafo").click(function()){
    $("#detalhes").slideDown();
});