I created a navigation bar using a <div> element. When the bar is clicked, the <div> below it slides down. However, I noticed that another content below those two <div>'s also moves down instead of staying in place.
You can view an image example here
In the image provided, you can see that when I click to slide down the first <div>, the other <div> underneath it also slides down. How can I resolve this issue?
HTML
<div id="slide">Click to slide down</div>
<div id="panel">Hello! This is my first sliding example.</div>
<div>This is another division.</div>
CSS
#slide{
text-align:center;
border:solid 1px #101010;
width:500px;
height:30px;
background:#cccccc;
}
#panel{
text-align:center;
border:solid 1px #101010;
width:500px;
height:200px;
display:none;
background:#ff0000;
}
jQuery
$(document).ready(function(){
$('#slide').click(function(){
$('#panel').stop().slideToggle(570);
});
});