Having trouble with a slide effect in my project. I have set up 4 images, where images 3 and 4 should slide down when clicked. Additionally, a div element should come down from them. I'm new to this, so apologies if it's a simple question. Any assistance would be greatly appreciated.
IMAGE 1 IMAGE 2
IMAGE 3 IMAGE 4
However, clicking on image 1 causes all the images to move unexpectedly. Image 2 works as intended (images 3 and 4 slide down with the div). Image 3 also behaves correctly. But when clicking on Image 4, all images move except for image 4 which ends up in an odd position.
CSS Styling:
.image1{position:relative;top:-10px;left:-10px;margin:10px;}
.image2{position:relative;top:-10px;left:25%;margin:10px;}
.image3{position:relative;top:0px;left:-10px;margin:10px;}
.image4{position:relative;top:0px;left:25%;margin:10px;}
body{left:20%;width:60%;height:110%;padding:10px;
background-color:white;position:absolute;
margin:0px;opacity:0.9;filter:alpha(opacity=90);
/* For IE8 and earlier */-webkit-box-shadow: 6px 6px 50px 5px rgba(0, 0, 0, .5);
box-shadow: 6px 6px 50px 5px rgba(0, 0, 0, .5);
border-radius:4px;
background-color:#0033ff;}
#panel,#panel2,#panel3,#panel4{
display:none;padding:400px;margin:auto;}
#panel,#flip,#panel2,#panel3,#panel4,#flip2,#flip3,#flip4{
padding:5px;text-align:center;background-color:#e5eecc;
border:solid 1px #c3c3c3;}
HTML Code
<img src = "pics/dog.jpg" id="flip" class ="image1"/>
<div id="panel">Hello world! test one</div>
<img src = "pics/dog.jpg" id="flip2" class ="image2"/>
<div id="panel2">Hello world! test two</div>
<div id="panel3">Hello world! test three</div>
<img src = "pics/dog.jpg" id="flip3" class ="image3"/>
<div id="panel4">Hello world! test four</div>
<img src = "pics/dog.jpg" id="flip4" class ="image4" />
Javascript Script:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<script>
$(document).ready(function(){
$("#flip2").click(function(){
$("#panel2").slideToggle("slow");
});
});
</script>
<script>
$(document).ready(function(){
$("#flip3").click(function(){
$("#panel3").slideToggle("slow");
});
});
</script>
<script>
$(document).ready(function(){
$("#flip4").click(function(){
$("#panel4").slideToggle("slow");
});
});