jQuery - Show id, based on selected items class?
<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>
