Show input type based on selection I have a small script that checks what the user selects, and based in his selection (1, 2 or 3) show the elements, but I'm not quite happy with the result. I believe that it could be much better the code, and repeat less times, here is my code example.

$(function() {

            //Hide elements
            $('#input').hide();
            $('#textarea').hide();
            $('#option').hide();

            //Show element based on selection
            $('#input_type').change(function(){    // use class or use $('select')

                var option_selected = $(this).val();

                switch(option_selected) {
                    case "1":
                        $('#input').show();
                        $('#textarea').hide();
                        $('#option').hide();

                        break;
                    case "2":
                        $('#textarea').show();
                        $('#input').hide();
                        $('#option').hide();
                        break;
                    case "3":
                        $('#option').show();
                        $('#textarea').hide();
                        $('#input').hide();
                        break;
                    default:
                        $('#input').hide();
                        $('#textarea').hide();
                        $('#option').hide();
                }

            });
        });
The nice thing about the code below is that if there are ever more inputs you only need to add one line for each, though as has been mentioned in the comments the way you do your html and css can decrease the size of your javascript.

$(function() {
    var elements = {
        "1" : "#input",
        "2" : "#textarea",
        "3" : "#option"
    };
    var show_selected = function(selected) {
        for (var key in elements)
            $(elements[key]).toggle(selected === key);
    };
    //Hide elements
    show_selected();

    //Show element based on selection
    $('#input_type').change(function(){    // use class or use $('select')
        show_selected($(this).val());
    });
});


below is an example where your html can reduce your javascript.

&lt;textarea class="input_type" id="textarea"&gt;&lt;/textarea&gt;
&lt;input class="input_type" id="input" /&gt;
&lt;select class="input_type" id="option"&gt;
    &lt;option&gt;Option 1&lt;/option&gt;
    &lt;option&gt;Option 2&lt;/option&gt;
&lt;/select&gt;
&lt;select id="input_type"&gt;
    &lt;option&gt;-&lt;/option&gt;
    &lt;option&gt;input&lt;/option&gt;
    &lt;option&gt;textarea&lt;/option&gt;
    &lt;option&gt;option&lt;/option&gt;
&lt;/select&gt;
&lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function() {
    //Hide elements
    $(".input_type").hide();

    //Show element based on selection
    $('#input_type').change(function(){    // use class or use $('select')
        $(".input_type").hide();
        $("#" + $(this).val()).show();
    });
});
&lt;/script&gt;