<a class="but1">but1</a>
<a class="but2">but2</a>
<a class="but3">but3</a>
<div class="block1">text1</div>
<div class="block2">text2</div>
<div class="block3">text3</div>

div{
  background-color:#00fff0;
  overflow:hidden;
  font-size:30px;
  height: 0px; 
}

.but2{
  background-color:#c10707;
}


.block1{
  height: 200px; 
}
.block2{

}

.block_act{
  animation-duration: 3s;
  animation-name: show;
  animation-timing-function: linear;  
  animation-iteration-count: 1;
  height: 200px; 
}

.block_none{
  animation-duration: 3s;
  animation-name: show;
  animation-timing-function: linear;  
  animation-iteration-count: 1;  
  animation-direction: reverse;
  height: 0px; 
}

.block3{}


@keyframes show {
0% { height: 0px; } 
50% { height: 0px; }
70% { height: 70px; }
100% { height: 200px; }
}

$( ".but2" ).click(function() {
$('.block2').toggleClass('block_act') ;
$('.block1').toggleClass('block_none')  ;
});