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...?