javascript - Toggle between two image does not work for me? -

i having 8 images overlapped 1 on other in svg file format. resemble tab menu bar.i have tab billing when tab active other tab must found behind , if click tab employee tab must active , other tab must inactive. need toggle between 2 images. hence tried out code.

.gold1 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gold2 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gold3 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gold4 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gold5 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gold6 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gold7 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gold8 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gray2 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gray3 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gray4 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gray5 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gray6 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gray7 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }  .gray8 {    position: absolute;    top: 10px;    left: 10px;    z-index: 1;  }

<script>    jquery("#infotoggler").click(function() {          jquery(this).find('img').toggle();  });  </script>  <img src="gray2.svg" class="gray2">  <img src="gray3.svg" class="gray3">  <img src="gray4.svg" class="gray4">  <img src="gray5.svg" class="gray5">  <img src="gray6.svg" class="gray6">  <img src="gray7.svg" class="gray7">  <img src="gray8.svg" class="gray8">  <div id="infotoggler">    <img src="gold1.svg" class="gold1" />      <img src="gray1.svg" class="gray1" style="display:none/>    </div>

can me code?

using jsfiddle provided in first comment have updated similar yours.

here jsfiddle link http://jsfiddle.net/m9qbb/372/ , html/css/jquery code

html

<div id="infotoggler">     <img src="gold1.svg" class="image1" />     <img src="gray1.svg" class="image2" style="display:none" /> </div> 

css

.image1 {     background-color: #f00;     width: 150px;     height: 150px; } .image2 {     background-color: #0f0;     width: 150px;     height: 150px; } 

jquery

$(function () {     $("#infotoggler").click(function () {         $(this).find('img').toggle();     }); });