показать/скрыть плавно - js

HTML

<div class="wrap">
    <div class="btn">Зайти в чат</div>
        <div class="hide">
           Содержимое скрытого бока... Это может быть всё что угодно, текст, изображения, встроенное видео или же чат, как в вашем случае.... Бла-Бла-Бла...
        </div>
</div>

CSS

/* контейнер демо */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,cyrillic);
* {
  box-sizing: border-box;
}
body {
  line-height: 1.5;
  font-family: 'Roboto';
  font-weight: 300;
}
.wrap {
    max-width: 860px;
    padding: 10px;
    margin: 0 auto;  
}
.hide {display: none;
    margin: 15px auto; 
    padding: 10px;
    border: solid 1px rgba(51, 51, 51, 0.12);
    background: #f5f2f0;
}
.btn {
    width: 100%;
    padding: 1.1rem 0;
    background-color: #16a085;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    font-size: 18px;
    color: #fff;
    background-color: #26a69a;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5px;
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    -o-transition: .2s ease-out;
    -ms-transition: .2s ease-out;
    transition: .2s ease-out;
    cursor: pointer;
}
.btn:hover {
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }

JavaScript

var d = document,
    but = d.getElementsByClassName('btn');
for(var i = 0; i < but.length; i++){
    but[i].addEventListener('click', toggleBlock, false);
}
function toggleBlock(){
    var sib = this.nextElementSibling;
    if(sib && sib.className == 'hide'){
        var state = sib.style.display;
        sib.style.display =  (state == 'block' ? 'none' : 'block');
        this.innerHTML = (state == 'block' ? 'Зайти в чат' : 'Закрыть чат');
      if(data.ok){
          alert("Ошибка разблокировки МЛ: ");
        }
      if(typeof(data.ok1) != 'undefined'){
        alert("Ошибка разблокировки МЛ:!!!!!!! ");
      }
    } else {
        var parent = this.parentNode;
        parent.style.display = 'none';
        parent.previousElementSibling.innerHTML = 'Зайти в чат';
        if(data.ok){
          alert("Ошибка разблокировки МЛ: ");
        }
        if(typeof(data.ok1) != 'undefined'){
        alert("Ошибка разблокировки МЛ: !!!!!! ");
      }
    }
}