title: jQuery switching between images
body: <p>I have a small script here to switch between 2 images... It works like if you select 1st it stay selected, if you select 2nd - 1st one is fading out and 2nd is being selected... Simple like that.</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function () {
      $(".theImage img").click(function () {
          var a = $(this).parent().attr("id") == "product-holder1" ? "product-holder2" : "product-holder1";
          console.log(a);
          $(this).fadeOut();
          $("#" + a + " img").fadeIn()
      })
  })
  </code></pre>
  
  <p>My problem is that I don't know how do I use it for more then 2 images?
  Let's say I have id "product-holder3" and maybe "product-holder4" so how do I write this in that jquery code, so it still switch between which one is being selected?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="product-holder1" class="theImage"&gt;
    &lt;img src="img/10-normal.png" /&gt;
  &lt;/div&gt;
  &lt;div id="product-holder2" class="theImage"&gt;
    &lt;img src="img/25-normal.png" /&gt;
  &lt;/div&gt;
      &lt;div id="product-holder3" class="theImage"&gt;
    &lt;img src="img/50-normal.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>#product-holder1 {
      background: url("img/10-selected.png");
      background-repeat: no-repeat;
      height: 182px;
      width: 195px;
      position: absolute;
      top: 40px;
      left: 62px;
      cursor: pointer;
  }
  #product-holder2 {
      background: url("img/25-selected.png");
      background-repeat: no-repeat;
      height: 182px;
      width: 195px;
      position: absolute;
      top: 40px;
      left: 124px;
      cursor: pointer;
  }
  #product-holder3 {
      background: url("img/50-selected.png");
      background-repeat: no-repeat;
      height: 182px;
      width: 195px;
      position: absolute;
      top: 40px;
      left: 186x;
      cursor: pointer;
  }
  </code></pre>
  
  <p>Just please tell me how to use it for product-holder3 and maybe one day I need for more images, so please let me know how that works? Thanks a lot! </p>
  
  <p>P.S I don't know anything about jQuery :D </p>