I have a layout roughly as follows:
<div id="foo">
<!-- a bunch of content -->
</div>
<div id="thumbnails">
<div class="thumb-content1"></div>
<div class="thumb-content2"></div>
<div class="thumb-content3"></div>
</div>
<div id="content-1">
<!-- some text and pictures, including large-pic1 -->
</div>
<div id="content-2">
<!-- some text and pictures, including large-pic2 -->
</div>
<div id="content-3">
<!-- some text and pictures, including large-pic3 -->
</div>
etc ....
On page load I want to show 'foo' and 'thumbnails' and hide the three content divs.
As the user clicks each thumbnail, I want to hide foo, and replace it with the matching 'content-x'.
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?
