[jQuery] event problem with jquery
i have following code for jquery and html,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../js/jquery-1.3.1.js"></script>
<script>
$(document).ready(function(){
$("#plus").toggle(
function(){
$("#child").show(1000);
},function(){
$("#child").hide(1000);
}
);
});
</script>
<style>
div#main{
width:200px;
height:100px;
border:1px red dotted;
padding:10px 0 0 10px;
}
#child{
width:300px;
height:100px;
border:1px blue dotted;
margin:0px 0 0 10px;
display:none;
background:#CCCCCC;
padding:5px;
}
</style>
</head>
<body>
<div id="main">
"<img id="plus" src="next.png" width="10" height="10"/>"
<div id="child">
</div>
"<img id="plus" src="next.png" width="10" height="10"/>"
<div id="child">
</div>
</div>
</body>
</html>
The script only works for the first image. But i want it for both
images...
can anyone help me...?