How to make a smooth change of blocks?

Question

css

Hello! Guys need your help. The site test.ulitabiz.in.ua is making a CATALOG.
Task: 1. Make a smooth change of blocks when you press the button. 2. So that when you press it again, the block does not collapse.
The code:

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script>
function openbox(id) {
  var all = document.querySelectorAll(".block-of-text");
  for (var i = 0; i < all.length; i++) {
    if (all[i].id == id) {
      all[i].style.display = (all[i].style.display == 'none')? 'block' : 'none';
    } else {
      all[i].style.display = 'none';
    }
  }
}
</script>

<a href="#" onclick="openbox('box1'); return false">Записаться</a>
<a href="#" onclick="openbox('box2'); return false">Записаться</a>
<a href="#" onclick="openbox('box3'); return false">Записаться</a>
<a href="#" onclick="openbox('box4'); return false">Записаться</a>

<div class="block-of-text" id="box1" ">Отображаемый блок 1</div>
<div class="block-of-text" id="box2" style="display: none;">Отображаемый блок 2</div>
<div class="block-of-text" id="box3" style="display: none;">Отображаемый блок 3</div>
<div class="block-of-text" id="box4" style="display: none;">Отображаемый блок 3</div>

Answer 1

Once you use jQuery, you can write through jQuery.
And we need to organize so that when adding a new block, we do not have to change the script.
The layout can be done like this:

<a href="#" class="js-open-box" data-target="#box1">Записаться</a>
<a href="#" class="js-open-box" data-target="#box2">Записаться</a>
<a href="#" class="js-open-box" data-target="#box3">Записаться</a>
<a href="#"  class="js-open-box" data-target="#box4">Записаться</a>

<div class="js-block-of-text block-of-text" id="box1">Отображаемый блок 1</div>
<div class="js-block-of-text block-of-text" id="box2">Отображаемый блок 2</div>
<div class="js-block-of-text block-of-text" id="box3">Отображаемый блок 3</div>
<div class="js-block-of-text block-of-text" id="box4">Отображаемый блок 4</div>

And then change js

$(document).ready(function(){
  $('.js-open-box').click(function(){
    var id = $(this).attr("data-target");
    if ( !$(id).hasClass("active") ){
      $(".js-block-of-text").removeClass("active");
      $(id).addClass("active");
    }
  });
})

And in CSS we make an appearance:

.block-of-text{
  height: 0px;
  overflow: hidden;
  transition: height 1s linear;
}
.block-of-text.active{
height: auto;
}