title: FadeTo several different images
body: <p>I'm very new to web design and JQuery· I'm trying to use FadeTo with 13 different images that each make appear a different text box when you click on them. For example, the photo called "Pinhole" would make appear a text about the creation of the pinhole camera, the one called "obscura" would make appear a text about the camera obscura, and so forth.</p>
  
  <p>For some reason, I can't manage to make it work. I tried different things, but either they would all fade at the same time, or none of them would work like it's the case right now, or I would get an error message. Here's my attempt:</p>
  
  <pre><code>$(document).ready(function(){
  
  $('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){
  
      $(pinhole).fadeTo('slow',0.5);
      }, function(){
      $(pinholeText).stop().fadeTo('slow',1);
      }
      );
  
      $(obscura).fadeTo('slow',0.5);
      }, function(){
      $(obscuraText).stop().fadeTo('slow',1);
      }
      );
  
      $(heliography).fadeTo('slow',0.5);
      }, function(){
      $(heliographyText).stop().fadeTo('slow',1);
      }
      );
  
      $(daguerreotype).fadeTo('slow',0.5);
      }, function(){
      $(daguerreotypeText).stop().fadeTo('slow',1);
      }
      );
  
      $(calotype).fadeTo('slow',0.5);
      }, function(){
      $(calotypeText).stop().fadeTo('slow',1);
      }
      );
  
      $(wetc).fadeTo('slow',0.5);
      }, function(){
      $(wetcText).stop().fadeTo('slow',1);
      }
      );
  
      $(drygel).fadeTo('slow',0.5);
      }, function(){
      $(drygelText).stop().fadeTo('slow',1);
      }
      );
  
      $(kodak1).fadeTo('slow',0.5);
      }, function(){
      $(kodak1Text).stop().fadeTo('slow',1);
      }
      );
  
      $(leica2).fadeTo('slow',0.5);
      }, function(){
      $(leica2Text).stop().fadeTo('slow',1);
      }
      );
  
      $(polaroid).fadeTo('slow',0.5);
      }, function(){
      $(polaroidText).stop().fadeTo('slow',1);
      }
      );
  
      $(dslr).fadeTo('slow',0.5);
      }, function(){
      $(dslrText).stop().fadeTo('slow',1);
      }
      );
  
      $(cellphone).fadeTo('slow',0.5);
      }, function(){
      $(cellphoneText).stop().fadeTo('slow',1);
      }
      );
  
      $(future).fadeTo('slow',0.5);
      }, function(){
      $(futureText).stop().fadeTo('slow',1);
      }
      );
  
  });
  </code></pre>
  
  <p>I tried several tutorials, but none of them worked. Could someone please give me a hint? That would be very appreciated!</p>