title: jQuery - Show id, based on selected items class?
body: <p>I have a layout roughly as follows:</p>
  
  <pre><code>&lt;div id="foo"&gt;
  
      &lt;!-- a bunch of content --&gt;
  
  &lt;/div&gt;
  
  
  &lt;div id="thumbnails"&gt;
      &lt;div class="thumb-content1"&gt;&lt;/div&gt;
      &lt;div class="thumb-content2"&gt;&lt;/div&gt;
      &lt;div class="thumb-content3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="content-1"&gt;
      &lt;!-- some text and pictures, including large-pic1 --&gt;
  &lt;/div&gt;
  
  &lt;div id="content-2"&gt;
      &lt;!-- some text and pictures, including large-pic2 --&gt;
  &lt;/div&gt;
  
  &lt;div id="content-3"&gt;
      &lt;!-- some text and pictures, including large-pic3 --&gt;
  &lt;/div&gt;
  
  etc ....
  </code></pre>
  
  <p>On page load I want to show 'foo' and 'thumbnails' and hide the three content divs.</p>
  
  <p>As the user clicks each thumbnail, I want to hide foo, and replace it with the matching 'content-x'.</p>
  
  <p>I can get my head round jQuery show, hide and replace (although, bonus points if you want to include that in your example!). But how would I extract and construct the appropriate content id, from the thumbnail class, then pass it to the show hide code?</p>