|
Сообщение от yatony
|
|
Мне бы простое открытие сверху вниз.
|
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div[id^="item"]{
-webkit-transition:height .6s;
-moz-transition:height .6s;
-o-transition:height .6s;
transition:height .6s;
width:200px;
height:0px;
overflow:hidden;
}
div.max{
height:100px;
-webkit-transition-delay:.6s;
-moz-transition-delay:.6s;
-o-transition-delay:.6s;
transition-delay:.6s;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-o-transition-duration:1s;
transition-duration:1s;
}
#item1{
background:#F93;
}
#item2{
background:#66F;
}
#item3{
background:#C3C;
}
</style>
<script type="text/javascript">
var _click = function () {
var b = 1;
return function (c) {
var a = document.getElementById("item" + b);
c == b && (a.className = "" == a.className ? "max" : "");
c != b && (a.className = "", a = document.getElementById("item" + c), a.className = "max", b = c)
}
}();
window.onload = function() {
_click(1)
}
</script>
</head>
<body>
<div>обычный див</div>
<a onclick="_click(1); return false;" href="#">1</a>
<a onclick="_click(2); return false;" href="#">2</a>
<a onclick="_click(3); return false;" href="#">3</a>
<div id="item1">div1</div>
<div id="item2">div2</div>
<div id="item3">div3</div>
<div>обычный див</div>
</body>
</html>