Question

I wonder if there’s a shorter way of doing that:

    <script>
       $(document).ready(function() {           
        $("#deliverer").change(function() {
         $("#opttuser").hide();
         $("#optdeliverer").show();
        });
        $("#tuser").change(function() {
         $("#optdeliverer").hide();
         $("#opttuser").show();
       });
     });
    </script>
    <input type="radio" id="deliverer" value="deliverer" name="type"/>
<input type="radio" name="type" value="tuser" id="tuser" />
    <div id='optuser'>//some input fields</div>
    <div id='optdeliverer'>//some other input fields

It works without any problem but I have the feeling that this can be done in a much shorter way.So is there any?

Answer 1

Try something like this… I added checked and hid the opposite div using css (demo):

html

<input type="radio" id="deliverer" value="deliverer" name="type" checked />
<input type="radio" name="type" value="tuser" id="tuser" />
<div id='optuser'>//some input fields</div>
<div id='optdeliverer'>//some other input fields</div>

code

$(document).ready(function() {
    $("#deliverer, #tuser").change(function() {
        $("#optdeliverer, #optuser").toggle();
    });
});

css

#optdeliverer { display: none; }