Swap images on click with specified image

I am new to jQuery and needed a solution for the following problem:

There are 3 images in a row and when the user clicks on one of them all three pictures are hiding and instead another image shows up (depending on the click). So while the markup and CSS is quite simple and only a quick draft the jQuery was the main issue. I came up with the following solution and would love to hear some advice, reviews, critiques or similar.

I also made a JSFiddle. for better understanding.

Here is my jQuery Code with similar click-functions (this bothers me a little):

var $button = 'Close';

$($button).appendTo('#panzer');

// Pic1 hide and replace
$( "#pic1" ).click(function() {
    $('#featured li img').hide( "slow");
  $( ".undercon1" ).show( "fast", function() {
            $('#closebtn').show();
  });
});
// Pic2 hide and replace
$( "#pic2" ).click(function() {
    $('#featured li img').hide( "slow");
  $( ".undercon2" ).show( "fast", function() {
        $('#closebtn').show();
  });
});
// Pic3 hide and replace
$( "#pic3" ).click(function() {
    $('#featured li img').hide( "slow");
  $( ".undercon3" ).show( "fast", function() {
        $('#closebtn').show();
  });
});

// Button shows only with Replacement Images

$('button#closebtn').click(
     function ()
     {
         $(this).hide();

         $(".undercon1").hide( "slow");
         $(".undercon2").hide( "slow");
         $(".undercon3").hide( "slow");
         $('#featured li img').show( "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:

• 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:

...

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:

...
...
...

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

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

StackExchange Code Review Q#62604, answer score: 4