smoothly slide up or down when sizes change

Question

I made two button .square related to two <div>.
If I click on one button .square : a related <div> appear, and the other disapear.

Thing is :
The content I display right after (bellow_div)
is making a strange transition when the height of #c1 or #c2 are changing.

How to smoothly slide up or down bellow_div and #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 is a text</div>

Answer 1

Use the .slideUp() and .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 is a text</div>

Answer 2

Check the Executing Code When an Animation Ends section here