Edit in JSFiddle

    $("input").click(function(){
            $('.box').hide();
            $("#box-"+$(this).val()).fadeIn('first');
    });
 

section{margin:50px;}
.box{display:none;padding:25px;width:350px;margin-top:15px;}

#box-1{background:#fedaf0;}
#box-2{background:#def4fa;}
#box-3{background:#fdfcdb;}
#box-4{background:#e9fbdd;}

<section>
<label><input id="rdb1" type="radio" name="foo" value="1" />pink</label>
<label><input id="rdb2" type="radio" name="foo" value="2" />blue</label>
<label><input id="rdb2" type="radio" name="foo" value="3" />yellow</label>
<label><input id="rdb2" type="radio" name="foo" value="4" />green</label>
<div id="box-1" class="box" style="display:none">
    pink
</div>
<div id="box-2" class="box" style="display:none">
    blue
</div>
<div id="box-3" class="box" style="display:none">
    yellow
</div>
<div id="box-4" class="box" style="display:none">
    green
</div>
</section>