javascript - How to toggle slices of multiple images with another image with jQuery -

i'm trying make when each image slice clicked, change different picture (which picture behind picture). trying make toggle also.

here have far:

html:

    <div id="main-wrapper">         <div id="first-wrapper">             <img src="img/cat0.png" cat-pic-src="cat0.png" alt="cat picture 0">             <img src="img/cat1.png" cat-pic-src="cat1.png" alt="cat picture 1">             <img src="img/cat2.png" cat-pic-src="cat2.png" alt="cat picture 2">             <img src="img/cat3.png" cat-pic-src="cat3.png" alt="cat picture 3">             <img src="img/cat4.png" cat-pic-src="cat4.png" alt="cat picture 4">         </div>         <div id="second-wrapper">             <img src="img/ninja0.png" ninja-pic-src="ninja0.png" alt="ninja picture 0">             <img src="img/ninja1.png" ninja-pic-src="ninja1.png" alt="ninja picture 1">             <img src="img/ninja2.png" ninja-pic-src="ninja2.png" alt="ninja picture 2">             <img src="img/ninja3.png" ninja-pic-src="ninja3.png" alt="ninja picture 3">             <img src="img/ninja4.png" ninja-pic-src="ninja4.png" alt="ninja picture 4">         </div>     </div> 

css

#main-wrapper {  width: 970px;  margin: 0 auto; }  img {  display: inline-block;  width: 500px;  margin: 2px 200px; }   #first-wrapper {  position: absolute;  display: inline-block; }  #second-wrapper {  position: absolute;  display: inline-block;  } 

jquery

$(document).ready(function(){  $('img').click(function(){     $(this).toggle().css('z-index', '10');      });  }); 

it's not working had expected to, when click on image each block click on disappears.

for example, if click on image "cat0.png", replace "ninja0.png" (depending on image click on), , if clicked on image "cat1.png" replace "ninja2.png" , on. if able toggle action well.

keep in mind each image stacked on top of each other.

is trying do, mentioned intention not clear?

there other (possibly better) ways this.

var mainwrapper = document.getelementbyid('main-wrapper'),      catimgs = [].slice.call(mainwrapper.getelementsbyclassname('cat')),      ninjaimgs = [].slice.call(mainwrapper.getelementsbyclassname('ninja'));    mainwrapper.addeventlistener('click', function (evt) {      var target = evt.target,          classlist = target.classlist;        if (classlist.contains('cat')) {          classlist.toggle('hidden');          ninjaimgs[catimgs.indexof(target)].classlist.toggle('hidden');      } else if (classlist.contains('ninja')) {          classlist.toggle('hidden');          catimgs[ninjaimgs.indexof(target)].classlist.toggle('hidden');      }  }, false);

#main-wrapper > .cat,.ninja {      width: 100px;      height: 100px;      display: block;  }  .cat {      position: relative;  }  .ninja {      position: relative;      top: -500px;  }  .hidden {      visibility: hidden;  }

<div id="main-wrapper">      <img class="cat" src="http://lorempixel.com/100/100/animals/1" alt="cat picture 0">      <img class="cat" src="http://lorempixel.com/100/100/animals/2" alt="cat picture 1">      <img class="cat" src="http://lorempixel.com/100/100/animals/3" alt="cat picture 2">      <img class="cat" src="http://lorempixel.com/100/100/animals/4" alt="cat picture 3">      <img class="cat" src="http://lorempixel.com/100/100/animals/5" alt="cat picture 4">      <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/1" alt="ninja picture 0">      <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/2" alt="ninja picture 1">      <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/3" alt="ninja picture 2">      <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/4" alt="ninja picture 3">      <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/5" alt="ninja picture 4">  </div>

update: direct conversion jquery

var $mainwrapper = $('#main-wrapper');      $catimgs = $mainwrapper.find('.cat'),      $ninjaimgs = $mainwrapper.find('.ninja');    $mainwrapper.on('click', 'img', function (evt) {      var target = evt.target,          $target = $(target);        if ($target.hasclass('cat')) {          $target.toggleclass('hidden');          $($ninjaimgs[$.inarray(target, $catimgs)]).toggleclass('hidden');      } else if ($target.hasclass('ninja')) {          $target.toggleclass('hidden');          $($catimgs[$.inarray(target, $ninjaimgs)]).toggleclass('hidden');      }  });

#main-wrapper > .cat,.ninja {      width: 100px;      height: 100px;      display: block;  }  .cat {      position: relative;  }  .ninja {      position: relative;      top: -500px;  }  .hidden {      visibility: hidden;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div id="main-wrapper">      <img class="cat" src="http://lorempixel.com/100/100/animals/1" alt="cat picture 0">      <img class="cat" src="http://lorempixel.com/100/100/animals/2" alt="cat picture 1">      <img class="cat" src="http://lorempixel.com/100/100/animals/3" alt="cat picture 2">      <img class="cat" src="http://lorempixel.com/100/100/animals/4" alt="cat picture 3">      <img class="cat" src="http://lorempixel.com/100/100/animals/5" alt="cat picture 4">      <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/1" alt="ninja picture 0">      <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/2" alt="ninja picture 1">      <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/3" alt="ninja picture 2">      <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/4" alt="ninja picture 3">      <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/5" alt="ninja picture 4">  </div>