javascript - smoothly slide up or down when sizes change -

i made 2 button .square related 2 <div>.
if click on 1 button .square : related <div> appear, , other disapear.

thing :
content display right after (bellow_div)
is making strange transition when height of #c1 or #c2 changing.

how smoothly slide or down bellow_div , #c1 or #c2 when changing height ?

$(function(){ // dom ready shorthand  $('.square:first').css('color', 'red');                     $(".square").on("click", function() {          var id= $(this).attr("contentid");          $('.square').css('color', ' #ccc');      $(this).css('color','red');        $('#details p').fadeout('fast', function() {        $(this).html($("#" + id).html()).fadein();      });      });        });

#details{      width:100%;      background:#999;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="square" contentid="c1">prochain évenement</div>  <div class="square" contentid="c2">editorial</div>    <div id="details">  <p>  jeudi 20 mars<br>  20h30<br>                                        upcoming eventssed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?  </p></div>    <div style="display: none" id="c1">    jeudi 20 mars<br>  20h30<br>                             upcoming eventssed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?  </div>    <div style="display: none" id="c2">  saison 2016—2017    </div>    <div class="bellow_div">here text</div>

use .slideup() , .slidedown() jquery functions.

$(function(){ // dom ready shorthand  $('.square:first').css('color', 'red');                     $(".square").on("click", function() {          var id= $(this).attr("contentid");          $('.square').css('color', ' #ccc');      $(this).css('color','red');        $('#details p').slideup().fadeout('fast', function() {        $(this).html($("#" + id).html()).slidedown().fadein();      });      });        });

#details{      width:100%;      background:#999;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="square" contentid="c1">prochain évenement</div>  <div class="square" contentid="c2">editorial</div>    <div id="details">  <p>  jeudi 20 mars<br>  20h30<br>                                        upcoming eventssed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?  </p></div>    <div style="display: none" id="c1">    jeudi 20 mars<br>  20h30<br>                             upcoming eventssed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?  </div>    <div style="display: none" id="c2">  saison 2016—2017    </div>    <div class="bellow_div">here text</div>