If/ else if statements to show and hide

Question

I've got some if and else if statements to show and hide svg elements and it works the way it should but I wonder if I can shorten the code since it looks so repetitive.

I'm not sure if it's possible since I'm not a JS/JQuery expert.

If/else if code

        //Door type 1
        if( id2 == "#Door1" && id3 == "#Grey")
        {
            var door = "#Door1Grey"
            $("g" + door).show().siblings("g:not(#BG)").hide();
            //console.log($("g" + door).show().siblings());
        }
        else if( id2 == "#Door1" && id3 == "#Blue")
        {
            var door = "#Door1Blue"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }
        else if( id2 == "#Door1" && id3 == "#Red")
        {
            var door = "#Door1Red"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }

        //Door type 2
        else if( id2 == "#Door2" && id3 == "#Grey")
        {
            var door = "#Door2Grey"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }
        else if( id2 == "#Door2" && id3 == "#Blue")
        {
            var door = "#Door2Blue"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }
        else if( id2 == "#Door2" && id3 == "#Red")
        {
            var door = "#Door2Red"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }

        //Door type 3
        else if( id2 == "#Door3" && id3 == "#Grey")
        {
            var door = "#Door3Grey"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }
        else if( id2 == "#Door3" && id3 == "#Blue")
        {
            var door = "#Door3Blue"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }
        else if( id2 == "#Door3" && id3 == "#Red")
        {
            var door = "#Door3Red"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }

id, id2 and id3 are set here:

        var wallChoice = String($('input[name=radiosWall]:checked', '#myFormFront').val());
        var id = String("#" + wallChoice);
        $("g" + id).show().siblings("g:not(#BG," + id + ")").hide();

        var doorChoice = String($('input[name=radiosDoor]:checked', '#myFormFront').val());
        var id2 = String("#" + doorChoice);

        var doorColorChoice = String($('input[name=radiosColor]:checked', '#myFormFront').val());
        var id3 = String("#" + doorColorChoice);

Answer 1

You're right, it is a bit repetitive. I believe you could boil it down to the following:

var door = id2 + id3.substr(1);
$("g" + door).show().siblings("g:not(#BG," + id + ")").hide();

or even:

$("g" + id2 + id3.substr(1)).show().siblings("g:not(#BG," + id + ")").hide();

ALSO if you change:

var doorColorChoice = String($('input[name=radiosColor]:checked', '#myFormFront').val());
var id3 = String("#" + doorColorChoice);

to

var id3 = String($('input[name=radiosColor]:checked', '#myFormFront').val());

you could have:

$("g" + id2 + id3).show().siblings("g:not(#BG," + id + ")").hide();

(provided the rest of your code doesn't need the "#" (hash) in id3. That would be faster than using substr)