Question

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?

Answer 1

Based on your markup, you can do something like this:

$("[id^=content]").hide();
$("#thumbnails > div").click(function() {
    var id = $(this).attr('class').replace('thumb-content','');
    $("#foo").html($("#content-"+id).html());
})​​​​​​​​​​​​​​​​;​

You can see a demo working here

This uses the ^= starts-with selector to hide the initial divs, and on click, uses .html() to copy the content like you want.

If you have a lot of these, it’s better to use .delegate(), which attaches a single event handler instead of n event handlers to every click-able <div>. It would look like this:

$("[id^=content]").hide();
$("#thumbnails").delegate("div", "click", function() {
    var id = $(this).attr('class').replace('thumb-content','');
    $("#foo").html($("#content-"+id).html());
});​

Demo updated for that here