Return to Answer

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:

1. Hide all the samples
2. Show the image corresponding to the sample
3. 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:

<li id="pic1" data-rel=".undercon1">...</li>

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:

<div class="row undercon undercon1">...</div>
<div class="row undercon undercon2">...</div>
<div class="row undercon undercon3">...</div>

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

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

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:

1. Hide all the samples
2. Show the image corresponding to the sample
3. 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:

<li id="pic1" data-rel=".undercon1">...</li>

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:

<div class="row undercon undercon1">...</div>
<div class="row undercon undercon2">...</div>
<div class="row undercon undercon3">...</div>

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

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