title: jQuery Click link to show var div images with div title in two locations simultaneously
body: <p>When a text menu is clicked, a photo fadeIn and the title also FadeIn placed in a separate location. I am having trouble integrating the titles. If there is a better method of doing this, I would appreciate your help.</p>
  
  <p>Demo: <a href="http://jsfiddle.net/Tacbs/4/" rel="nofollow">http://jsfiddle.net/Tacbs/4/</a></p>
  
  <pre><code>$(document).ready(function() {
  $("div#photos, div#photo-titles").hide();
  var divs = $("#Photo1, Photo1-Title, #Photo2,  Photo2-Title, #Photo3, Photo3-Title,");
  $("li a").click(function () {
  $(divs).hide();
  $("#" + $(this).attr("class")).fadeIn();
  });
  });​
  
  #photo-titles {
  margin-top: 0;
  }
  #photos {
  margin-top: 100px;
  }
  #photo-titles {
  margin-top: 200px;
  }​
  
  &lt;div id="photo-links"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#" class="Photo1 Photo1-Title"&gt;Photo 1 Button&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="Photo2 Photo2-Title"&gt;Photo 2 Button&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="Photo3 Photo3-Title"&gt;Photo 2 Button&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="photos"&gt;
  &lt;div id="Photo1"&gt;&lt;img src="Photo1.jpg"/&gt;&lt;/div&gt;
  &lt;div id="Photo2"&gt;&lt;img src="Photo1.jpg"/&gt;&lt;/div&gt;
  &lt;div id="Photo3"&gt;&lt;img src="Photo1.jpg"/&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="photo-titles"&gt; // text
  &lt;div id="Photo1-Title"&gt;Photo Title 1&lt;/div&gt;
  &lt;div id="Photo2-Title"&gt;Photo Title 2&lt;/div&gt;
  &lt;div id="Photo3-Title"&gt;Photo Title 3&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>