1

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

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>

1 ответ 1

1

Самый простой способ - использовать jQuery

$(document).ready(function(){
  $('#toggler').click(function(){
    $('#slider').slideToggle();
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.