Question

I’m trying to build a menu. OVer a canvas I load different images and position them using CSS. Currently I operate with SHOW / HIDE with a lots of code duplication. My questions are:
– instead of just hidding an image, how can I change it on click with another one? and then again hide it, if I should click another button?
– is it possible to write all this code somehow simpler?

Thanks a lot…

   $("#ten").click(sizeTen);
function sizeTen(){
    cb_ctx.lineWidth = 10;
    clickSound();
    $(this).hide();
    $("#twenty").show();
    $("#forty").show();
    $("#sixty").show();
}

$("#twenty").click(sizeTwenty);
function sizeTwenty(){
    cb_ctx.lineWidth = 20;
    clickSound();
    $(this).hide();
    $("#tenClick").show();
    $("#ten").show();
    $("#forty").show();
    $("#sixty").show();
}

$("#forty").click(sizeForty);
function sizeForty(){
    cb_ctx.lineWidth = 40;
    clickSound();
    $(this).hide();
    $("#ten").show();
    $("#twenty").show();
    $("#sixty").show();
}

$("#sixty").click(sizeSixty);
function sizeSixty(){
    cb_ctx.lineWidth = 60;
    clickSound();
    $(this).hide();
    $("#ten").show();
    $("#twenty").show();
    $("#forty").show();
}

Answer 1

May be You Could shrink your coding by the following piece of code,

$("#ten,#twenty,#sixty").show();