[jQuery] open-closed divs
Hi;
This is my open-closed divs:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-9">
<title>Untitled Document</title>
<style>
#category {
background:#0F0;
height:83px;
width:100%;
}
#index {
line-height: 22px;
background: #303030;
float: left;
height: 22px;
width: 630px;
margin-right:3px;
}
/*button control*/
.buttonControl {
float: left;
width: 299px;
}
#enter {
line-height: 33px;
background: #5892E2;
clear: both;
padding:7px 0;
width: 100%;
display:none;
height:19px;
}
#search {
background: #DA1238;
clear: both;
padding:7px 0;
width: 100%;
display:none;
height:19px;
}
.buttonControl a{
float: left;
display:block;
padding-left:25px;
height:22px;
line-height:22px;
}
.buttonControl a, .buttonControl a:hover, .buttonControl a:visited{
color:#000;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".cat").click(function(){
$("#category").slideToggle("slow");
$("#enter").hide("slow");
$("#search").hide("slow");
});
$(".enter").click(function(){
$("#enter").slideToggle("slow");
$("#category").hide("slow");
$("#search").hide("slow");
});
$(".search").click(function(){
$("#search").slideToggle("slow");
$("#category").hide("slow");
$("#enter").hide("slow");
});
});
</script>
</head>
<body>
<div class="innerWrapper">
<div id="category">
Sed tincidunt ipsum ac diam. Suspendisse id metus ac dolor
viverra auctor. Ut fringilla malesuada sapien. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Etiam varius. Fusce sit amet eros. Pellentesque dapibus,
odio sit amet rutrum congue, justo est feugiat lacus, vel varius
mauris leo non velit. Morbi leo augue, pellentesque ut, faucibus et,
cursus ut, dui. Nunc eget risus et tortor congue congue. Donec ut
neque. Duis eget ipsum. Curabitur metus. Sed rhoncus, felis quis
vulputate sodales, magna sapien fringilla ipsum, sed viverra risus
lorem id leo. Morbi malesuada. Curabitur sed metus fermentum erat
rhoncus feugiat. Sed a lorem ut metus laoreet aliquet. Pellentesque at
justo. Morbi at massa. Nam quis mi. Integer laoreet.
</div>
<div id="enter">
</div>
<div id="search">
</div>
<div id="index">there is index</div>
<div class="buttonControl"> <a href="#" class="cat">clickMe1</a>
<a href="#" class="enter">clickMe2</a> <a href="#"
class="search">clickMe3</a> </div>
</div>
</body>
</html>
This transitions are not very good look, there is a "withe" place when
other div take place. I dont want this white section. And I want that
this transitions happen from top to bottom.
How can I do this?
Thank in advance