Question

I have 9 images and 9 tables. Each image acts as a “button” that will cause the table it pertains to to toggle. The tables are hidden initially with display:none, so clicking image 1 shows table 1, but clicking image 1 also makes sure tables 2-9 are hidden as well because they all show up in the same location. If the others are not hidden, then one I click on to toggle its table will appear below the one that is already showing.

The basic code to achieve this looks like so:

$('#img1').click(function(){
    $('#tbl2, #tbl3, #tbl4, #tbl5, #tbl6, #tbl7, #tbl8, #tbl9').hide();
    $('#tbl1').toggle('fast');
 });

Except that I repeat this for each image click function. What I would like to do is set up a function or something, that will allow me to greatly simplify this code since it is enormously redundant. Any suggestions?

Answer 1

I got this to work using this code. Perhaps it will help someone else in the future.

$("#contianer img").click(function() {
    $('#tbl1_img, #tbl2_img, #tbl3_img, #tbl4_img, #tbl5_img, #tbl6_img, #tbl7_img, #tbl8_img, #tbl9_img').removeClass('selected');
    $(this).addClass('selected');
    var tblToShow = $(this).attr('id').replace('_img', '');
    $('#tbl1, #tbl2, #tbl3, #tbl4, #tbl5, #tbl6, #tbl7, #tbl8, #tbl9').addClass('hidden').removeClass('fadeIn');
    $('#'+tblToShow).toggleClass('hidden');
    $('#'+tblToShow).addClass('fadeIn');
});