Недавно было необходимо написать скрипт, который бы при нажатии на определённую ссылку, плано раскрывал 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>
Собственно вот результат - тыц. Данный пример хорош тем, что не требует каких-либо библиотек.
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;
}