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);

• Ethan Bierlein: The desire to improve code is implied for all questions on this site. Question titles should reflect the purpose of the code, not how you wish to have it reworked. See How to Ask.
• Mosh: I wasn't sure if I should've added it or not, I changed it now.
• 200_success: Please show us your SVG as well. You could make a live demo by pressing Ctrl-M in the question editor.

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)

• Ivan Modric: Happy to help :)