title: How to use the same JQuery effect for different divs with same class
body: <p>I'm not really into using javascript and jQuery so please add detailed answers.</p>
  
  <p>I need to add a jQuery effect to different <code>div</code>s with the same class, so that when I click on a div <code>1</code> with class <code>item</code>, another div <code>info</code> will appear in a specific container.<br>
  Also, if I click on div <code>2</code> with the same class <code>item</code>, another div <code>pics</code> will appear in the same container as <code>info</code> while <code>info</code> will disappear.</p>
  
  <p>I was going to use this:</p>
  
  <pre><code>$(document).ready(function(){
      $("#box1").click(function(){
          $("#box1").fadeOut(250);
      });
      $("#box1").click(function(){
          $("#box2").fadeIn(500);
      });
  });
  </code></pre>
  
  <p>But this is not valid for using about 10 <code>div</code>s and another 10 displaying and hiding <code>div</code>s.<br>
  I would use many lines of code and I am not sure that it would work. </p>