<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>jquery Click Toggle and change the icon SRC</title></Head><Scriptsrc= "Images/jquery-1.8.3.min.js"></Script> <Script>//function Implementation//parameter para1: ID of the element you want to hide//parameter para2: ID of IMG that wants to change the image src/*function Toggle1 (PARA1,PARA2) {if ($ ("#" +para2). attr ("src") = = "Images/col_24.jpg") {$ ("#" +para2). attr ("src "," images/col_11.jpg "); } else {$ ("#" +para2). attr ("src", "images/col_24.jpg"); } $ ("#" +PARA1). Toggle ();}*///jquery Closure Implementation(function($) {$ (document). Ready (function(){ $("#div1"). Click (function(){ if($("#img1"). attr ("src")=="images/col_24.jpg") { $("#img1"). attr ("src","images/col_11.jpg"); } Else { $("#img1"). attr ("src","images/col_24.jpg"); } $("#p1"). Toggle (); }); $("#div2"). Click (function(){ if($("#img2"). attr ("src")=="images/col_24.jpg") { $("#img2"). attr ("src","images/col_11.jpg"); } Else { $("#img2"). attr ("src","images/col_24.jpg"); } $("#p2"). Toggle (); }); });}) (jQuery);</Script><Body><!--function Implementation HTML code part -<!--<div id= "Div1" onclick= "Toggle1 (' P1 ', ' img1 ')" style= "Width:350px;background-color: #0F3; height:30px; Vertical-align:middle; line-height:30px; " > Click here to hide the P1 below and change the icon src</div><p id=" P1 "> P1</p><div id=" div2 "to hide onclick= "Toggle1 (' P2 ', ' Img2 ')" style= "Width:350px;background-color: #F00; height:30px; Vertical-align:middle; line-height:30px; " > Click here to hide the P2 below and change the icon src</div><p id=" P2 "> p2</p> to hide -<!--Closure Implementation HTML code section -<DivID= "Div1"style= "Width:350px;background-color: #0F3; height:30px; vertical-align:middle; line-height:30px;"><imgID= "IMG1"src= "Images/col_24.jpg"style= "padding-left:20px; padding-right:20px" />Click here to hide the P1 below and change the icon SRC</Div><PID= "P1">To hide the P1</P><DivID= "Div2"style= "Width:350px;background-color: #F00; height:30px; vertical-align:middle; line-height:30px;"><imgID= "Img2"src= "Images/col_24.jpg"style= "padding-left:20px; padding-right:20px" />Click here to hide the P2 below and change the icon SRC</Div><PID= "P2">To hide the P2</P></Body></HTML>
jquery Click Change image src Source and toggle