Question

I’m trying to make it so when you click on a particular image, that image will hide, then it’s corresponding youtube video iframe will show and slide down. I’ve already made this work BUT I would like to condense this code so I don’t have to enter it in for each image/video combination. How would I go about turning this into just one short bit of code that automatically applies to images with #something_click and matching video with #something_slide?

$(document).ready(function(){   

$('#abcd_click').click(function(evt){
    evt.preventDefault();
    $(this).hide();
$('#abcd_slide').before("<br />").slideDown('slow');
});

$('#efgh_click').click(function(evt){
evt.preventDefault();
$(this).hide();
$('#efgh_slide').before("<br />").slideDown('slow');
});

On and on and on and on………

EDIT: Not sure if this is the best, cleanest or fastest way, but I did get this to do the trick using a combination of some of the answers. Thanks to all!

<script type="text/javascript">
$(document).ready(function(){   
$('img[id$="_click"]').click(function(evt) {
        evt.preventDefault();
        var thisId = $(this).attr('id');
        var videoID = thisId.split('_')[0];
        $(this).hide();
        $('#'+videoID+'_slide').before('<br />').slideDown('slow');   
   });        
});    
</script>

Answer 1

Assuming that you want to do this for all images on your page, here is one way of doing this generically:

$(document).ready(function(){   

    $('img').click(function(evt) {
        var thisId = $(this).attr("id");
        if(thisId && thisId.indexOf("_click") != -1)
        {
           var videoId = thisId.split("_")[0];
           evt.preventDefault();
            $(this).hide();
            $("#"+videoId+"_slide").before("<br />").show().slideDown('slow');

        }
    });
});​

Here is an example fiddle.