Swap images on click with specified image
Essentially I agree with @gerdi's answer, but I would do it slightly simpler.

Basically, you want to perform the same kind of action for each sample clicked:


Hide all the samples
Show the image corresponding to the sample
Show the close button


The only variable is the image to show, which must correspond to the image clicked. A good place to express this relationship is a data-* attribute, which you can put on the same tag that will receive the clicks:

&lt;li id="pic1" data-rel=".undercon1"&gt;...&lt;/li&gt;


I called it data-rel (for "related", "relationship"), and set the value to a valid DOM selector expression. This way you can rewrite the click handler in a way that you can apply to all the #feature li elements, without having to write one by one:

$('#featured li').click(function() {
    $('#featured li img').hide("slow");
    var selector = $(this).data('rel');
    $(selector).show("fast", function() {
        $('#closebtn').show();
    });
});


The shortcut $(this).data('rel') will take the value of the data-rel attribute, equivalent to $(this).attr('data-rel').



Another thing, in the click handler of the close button, to avoid the repeated similar lines for .undercon1, .undercon2, ..., you could give them all a common undercon class:

&lt;div class="row undercon undercon1"&gt;...&lt;/div&gt;
&lt;div class="row undercon undercon2"&gt;...&lt;/div&gt;
&lt;div class="row undercon undercon3"&gt;...&lt;/div&gt;


so that you can hide them all easily with one line:

$(".undercon").hide("slow");