help me simplify this jquery code

Question

i am making a form consist of radio buttons, and i am hiding the detail information which will appear according to what radio button checked, here's my code

$(function() {
    $("#silver").hide();
    $("#silver2").hide();
    $("#silver3").hide();
    $("#silver4").hide();
    $("#gold").hide();
    $("#gold2").hide();
    $("#gold3").hide();
    $("#platinum").hide();
    $("#platinum2").hide();

    $("input[name='period']").change(function(){
        if ($("input[name='period']:checked").val() == '1'){
            $("#silver").fadeIn("fast");
            $("#silver2").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold").hide();
            $("#gold2").hide();
            $("#gold3").hide();
            $("#platinum").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '2'){
            $("#silver2").fadeIn("fast");
            $("#silver").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold").hide();
            $("#gold2").hide();
            $("#gold3").hide();
            $("#platinum").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '3'){
            $("#silver3").fadeIn("fast");
            $("#silver").hide();
            $("#silver2").hide();
            $("#silver4").hide();
            $("#gold").hide();
            $("#gold2").hide();
            $("#gold3").hide();
            $("#platinum").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '4'){
            $("#silver4").fadeIn("fast");
            $("#gold").hide();
            $("#platinum").hide();
        }else if($("input[name='period']:checked").val() == '5'){
            $("#gold").fadeIn("fast");
            $("#silver").hide();
            $("#silver2").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold2").hide();
            $("#gold3").hide();
            $("#platinum").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '6'){
            $("#gold2").fadeIn("fast");
            $("#silver").hide();
            $("#silver2").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold").hide();
            $("#gold3").hide();
            $("#platinum").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '7'){
            $("#gold3").fadeIn("fast");
            $("#silver").hide();
            $("#silver2").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold2").hide();
            $("#gold").hide();
            $("#platinum").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '8'){
            $("#platinum").fadeIn("fast");
            $("#silver").hide();
            $("#silver2").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold").hide();
            $("#gold2").hide();
            $("#gold3").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '9'){
            $("#platinum2").fadeIn("fast");
            $("#silver").hide();
            $("#silver2").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold").hide();
            $("#gold2").hide();
            $("#gold3").hide();
            $("#platinum").hide();
        }   
    });
});

i think that this is rather horrible, how can i simplify this ? please help me thank you

Regards

Answer 1

1. apply a class to all these elements: silver, silver2, silver3, silver4, gold, gold2, gold3, platinum, platinum2. Let's say it will be class="switchable"

2. at the beginning of the method above don't hide each of the elements, but do simple:

    $(".switchable").hide(); 

3. then apply some different attribute to each of the elements with according to values in your radiobuttons. That would be:

    <xx id="#silver" data-rel="1"></xx> ... <xx id="#silver2" data-rel="2"></xx> ... <xx id="#period" data-rel="3"></xx> ... // etc.. 

4. then your change() handler should look like this:

    $("input[name='period']").change(function() { var rel = $("input[name='period']:checked").val(); $(".switchable").hide(); $(".switchable[data-rel='" + rel + "']").fadeIn("fast"); }); 

Hope you got my idea

Answer 2

You can try encapsulating the following lines in its own function. For example:

function do() {
  $("#silver").fadeIn("fast");
  $("#silver2").hide();
  $("#silver3").hide();
  $("#silver4").hide();
  $("#gold").hide();
  $("#gold2").hide();
  $("#gold3").hide();
  $("#platinum").hide();
  $("#platinum2").hide();
}

Then inside your if-else condition, you can do the following:

$("input[name='period']").change(function(){
    if ($("input[name='period']:checked").val() == '1'){
        do();
    }else if($("input[name='period']:checked").val() == '2'){
        doAnother();
    }else if($("input[name='period']:checked").val() == '3'){
        doAnotherAnother();
    }
   ...
}

At least this would make your code readable.

Answer 3

Well, could you add a class="metal" to your silver, gold, etc? Then you could do this:

$(function() {
    $('.metal').hide();

    $("input[name='period']").change(function(){
        switch ($("input[name='period']:checked").val()){
            case '1':
                $("#silver").fadeIn("fast");
                $(".metal:not(#silver)").hide();
            break;
            case '2':
                $("#silver2").fadeIn("fast");
                $(".metal:not(#silver2)").hide();
            break;
            (etc)
        }   
    });
});

Alternatively, you could put this at the start:

var $metals = $('#silver, #silver2 (etc)');

And then use:

$metals.not($('#silver').show()).hide();

Answer 4

Why don't you use some metals class, then:

function reset() {
    $(".metals").hide();
}

var gElems = [ "silver", "silver2", "silver3", "silver4", "gold", 
               "gold2", "gold3", "platinum", "platinum2" ]; 

$(function() {
    reset();

    $("input[name='period']").change(function(){
        var val = $("input[name='period']:checked").val();
        reset();

        if (val > 0 && val < gElem.length - 1) {
            $("#" + gElem[val + 1]).fadeIn("fast");
        }
    });
});

(not tested)