Q:

i have problem with jquery slide up and down

i have a div and inside of div i want to fill it with paragraph that i get from server and it may be 1 or 100 paragraphs.
i want to just show the first one and the rest wont be shown and by click div slide down and show the rest.
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

var slideStatus = false;

 if (!slideStatus) {
   $(".card-text-paragraph").animate({ height: "100%" }, "slow");
    console.log(slideStatus);
    slideStatus = true;
    console.log(slideStatus);
  } else {
    $(".card-text-paragraph").animate({ height: "90px" }, "slow");
    console.log(slideStatus);
    slideStatus = false;
    console.log(slideStatus);
  }

it slides up smoth but wont slide down smoth to 100% if i give it in px it will be ok but i want to go to 100% 
any one can help me ?

A:

another option slideToggle

function clickfunc(){
   $(".card-text-paragraph").slideToggle();
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="clickfunc()">click</button>
<div class="card-text-paragraph" style="">
<p>.</p>
<p>..</p>
<p>...</p>
<p>....</p>
<p>.....</p>
</div>

