среда, 25 сентября 2013 г.

Плавное раскрытие div-а, при помощи Javascript

Недавно было необходимо написать скрипт, который бы при нажатии на определённую ссылку, плано раскрывал div.

Собственно вот результат - тыц. Данный пример хорош тем, что не требует каких-либо библиотек.




Html, тут всё стандартно и пояснений, думаю не нужно:

<div id="reg">
    <a id="button" href="#"> Регистрация</a>
    <div id="informer" class="b-toggle">
        <form>
            <div><input/></div>
            <button/>
        </form>
    </div>
    text
</div>

JavaScript:

button.onclick = function (){
    var className = informer.className;
    if( className.indexOf(' expanded') == -1 ){
        className += ' expanded';
    }
    else {
        className = className.replace(' expanded', '');
    }
    informer.className = className;
    return false;
};

CSS:

 .b-toggle {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    -moz-transition: opacity .3s, max-height .3s;
    -ms-transition: opacity .3s, max-height .3s;
    transition: opacity .3s, max-height .3s;
    _display: none;
}
.expanded {
    max-height: 100px;
    opacity: 1;
    _display: block;
}


IT-записки

comments powered by Disqus