title: jQuery - Show/Hide items individually with same class name
body: <p>I am an extreme noob with jQuery.</p>
  
  <p>I'm trying to show an item based on it's corresponding link...without showing the other items.
  All my links have the same class name, as well as the spans.</p>
  
  <p>I don't know if this can be done or not...been racking my brain for too long on this one.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;title&gt;jQuery - Show/Hide items individually with same class name&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  * { outline: none; }
  a { display: inline-block; margin-right: 10px; float: left; text-decoration: none;     padding: 10px; }
  span { text-align: center; display: inline; padding: 20px; background: blue; color: #fff; float: left; margin-right: 20px; width: 120px; }
  div#wrap { float: left; clear: left; margin-top: 10px; }
  div#linkOne, div#linkTwo, div#linkThree { background: #ccc; display: inline-block;     float: left; margin-right: 20px; }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function(){
  
        var spans = $("span").each(function(j){ $(this).attr({class : "myDiv" + j}) });
        $(spans).hide();
  
        $(".show").each(function(i){
          $(this).attr({class : "show" + i});
          $(this).bind("click", function(e){
           $(spans).show();
         });
        });
  
        $(".hide").click(function(){
         $(spans).hide();  
        });
  
       });
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="linkOne"&gt;
      &lt;a class="show" href="#"&gt;Show1&lt;/a&gt;
      &lt;a class="hide" href="#"&gt;Hide1&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="linkTwo"&gt;
      &lt;a class="show" href="#"&gt;Show2&lt;/a&gt;
      &lt;a class="hide" href="#"&gt;Hide2&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="linkThree"&gt;
      &lt;a class="show" href="#"&gt;Show3&lt;/a&gt;
      &lt;a class="hide" href="#"&gt;Hide3&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div id="wrap"&gt;
      &lt;span class="myDiv"&gt;div1&lt;/span&gt;
      &lt;span class="myDiv"&gt;div2&lt;/span&gt;
      &lt;span class="myDiv"&gt;div3&lt;/span&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>