Как сделать плавный Спойлер

Друзья помогите сделать плавный спойлер есть вот такой вот скрипт который открывает спойлер но он резкий , как его сделать плавным

window.onload = function () {
    document.getElementById('toggler').onclick = function () {
        openbox('slider', this);
        return false;
    };
};
function openbox(id, toggler) {
    var div = document.getElementById(id);
    if(div.style.display == 'block'){
        div.style.display ='none';
        toggler.innerHTML = 'Открыть';
    }
    else{
        div.style.display = 'block';
        toggler.innerHTML = 'Закрыть';
    }
}
<div id="centerlayer">
    <div class="header">
        <img src="thumbs/header.png"/>
    </div>
             <a id="toggler" href="#">Открыть</a>
    <div id="slider" style="display: none;">
                <div class="left_arrow">
                    <img src="full/left_arrow.png" id="left_arrow"/>
                </div>
                <div class="right_arrow">
                    <img src="full/right_arrow.png" id="right_arrow"/>
                </div>
                <img src="full/1.png" id="mainImage" class="mainImage"/>
    </div>