<div class='block'>

    <div class='text'>dsadsadsadas</div>
    <div class='text'>dsadxzczxczx</div>
    <div class='text'>dasdasdasdas</div>
    <div class='text'>dzxcsadasdasdcc</div>
    <div class='text'>dsadasdccv</div>

  </div>


<div class='hide'>hide</div>
<div class='show'>show</div>

.block{
   
  width:400px;
  background:brown;
    display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  overflow:auto;
  animation-duration:3s;
animation-name: ani;  
animation-timing-function: linear;
animation-iteration-count: 1;
}
.text{
  background:green;
  margin:5px;
  padding:4px;
}
 


@keyframes ani {
0% {
max-height:0px;
}  

100% {
max-height:100px;
}

}

  // select field
  $( "body" ).on('click', '.hide', function() {
    $('.block').hide()
  });

  $( "body" ).on('click', '.show', function() {
    $('.block').show()
  });