[jQuery] Simple accordion
Look here is something interesting http://www.apple.com/iphone/ ( left
bottom)
I tried to make a script like that., but I have an animating problem.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
all = $("#all > *");
all.mouseover (
function() {
$(".curent").animate({height:'100px'});
$(this).animate({height:'200px'});
all.not(this).attr("class","cel");
$(this).attr("class","curent");
}
);
});
</script>
<style>
.cel {
background:#7D7D7D;
height:100px;
width:100px;
border:1px solid black;
}
.curent {
background:#969696;
width:100px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="all">
<div class="cel">
div 1
</div>
<div class="cel">
div 1
</div>
<div class="cel">
div 1
</div>
<div class="cel">
div 1
</div>
</div>
</body>
</html>
I want the to have the same height overall.
Just test the script, and you will know my problem .
Please Help ME!