<div>
  <p>Click on this first visible paragraph.</p>
  <p>It's harder when the content you want to animate the height of is supposed to be initially closed. 
    Nam at tortor porta, imperdiet mi at, iaculis lorem. Donec mollis faucibus lacinia. Ut mollis tortor vitae lorem malesuada pretium. Suspendisse porta malesuada dui interdum mattis. In malesuada, enim id pulvinar luctus, eros lectus posuere nunc, et eleifend risus velit ac ipsum. Morbi urna est, ornare quis ligula egestas, cursus euismod eros. Cras eu malesuada lacus, at lacinia velit. Fusce a lorem ultrices nunc gravida consectetur. Phasellus vel mollis quam. Vestibulum bibendum, velit quis auctor congue, lectus arcu ultricies velit, vel ullamcorper orci libero ac neque. Suspendisse in orci vitae diam vulputate finibus eget eget felis. Sed elementum sit amet urna a posuere. Cras volutpat sagittis est, eget tempus leo interdum ac. Vestibulum accumsan dui at ornare rutrum. Phasellus orci lectus.</p>
</div>
<hr/>

p{}
p:first-child{
  text-decoration: underline
}
p:last-child{
  --fullHeight: auto;
  height: var(--fullHeight);
  opacity: 0;
}
p.ready{
  height: 0;
  overflow: hidden;
  transition:all 1s ease-in
}
p.ready.open{
  height: var(--fullHeight);
  opacity: 1;
}

/* this is jQuery code  but simple in plain JS */

$(document).ready(function() {
  
  var p1 = $("p:first-child");
  var p2 = $("p:last-child");
  
  $(p2)[0].style.setProperty("--fullHeight",  $(p2).height() + "px");
  
  $(p2).addClass("ready");
  
  $(p1).on("click",function(e){
    
    $(p2).toggleClass("open");
    
  })
  
});