Divs don't hide when different radio button is selected

Question

Problem: I have three Radio Buttons, if you select the first the correspondent div has to appear and the others have to be hidden, now if you press the buttons one after each other the divs just pile up instead of hide and show the correct one. Where did I choose the wrong path?

Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
    $("input[name$='group1']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#"+test).show();
    }); 
});

HTML:

<label><input type="radio" name="group1" value="red">1. DIV</label><br>
<label><input type="radio" name="group1" value="green"> 2. DIV</label><br>
<label><input type="radio" name="group1" value="blue"> 3. DIV</label><br>

<div id= red class= dect style="display: none;"> 
    Only first DIV displayed
</div>

<div id= blue class= dect style="display: none;"> 
    Only second DIV displayed
</div>

 <div id= green class= dect style="display: none;"> 
   Only third DIV displayed
</div>

$(document).ready(function() {
  $("input[name$='group1']").click(function() {
    var test = $(this).val();
    $("div.desc").hide();
    $("#" + test).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" name="group1" value="red">1. DIV</label><br>
<label><input type="radio" name="group1" value="green"> 2. DIV</label><br>
<label><input type="radio" name="group1" value="blue"> 3. DIV</label><br>

<div id=r ed class=d ect style="display: none;">
  Only first DIV displayed
</div>

<div id=b lue class=d ect style="display: none;">
  Only second DIV displayed
</div>

<div id=g reen class=d ect style="display: none;">
  Only third DIV displayed
</div>

Answer 1

You have used

$("div.desc").hide();

But it should be

$("div.dect").hide();

There is a typo in your code. Correct that and it should work.

Answer 2

You made a few mistakes,

1. ("div.dect") should be ("div.desc")
2. your input with value blue aka 3. div should be green to match the divs below.
3. You had spaces in your id's like as in id=r ed and id=b lue

$(document).ready(function() {
  $("input[name$='group1']").click(function() {
    var test = $(this).val();
    $("div.desc").hide();
    $("#" + test).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" name="group1" value="red">1. DIV</label><br>
<label><input type="radio" name="group1" value="blue"> 2. DIV</label><br>
<label><input type="radio" name="group1" value="green"> 3. DIV</label><br>

<div id="red" class="desc" style="display: none;">
  Only first DIV displayed
</div>

<div id="blue" class="desc" style="display: none;">
  Only second DIV displayed
</div>

<div id="green" class="desc" style="display: none;">
  Only third DIV displayed
</div>

Answer 3

You made mistake here.

it should be this $("div.dect").hide(); instead of $("div.desc").hide();

it is dect you spelled it wrong

Try this it will helps you.

$(document).ready(function(){ 
    $("input[name$='group1']").click(function() {
        var test = $(this).val();
        $("div.dect").hide();
        $("#"+test).show();
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" name="group1" value="red">1. DIV</label><br>
<label><input type="radio" name="group1" value="green"> 2. DIV</label><br>
<label><input type="radio" name="group1" value="blue"> 3. DIV</label><br>

<div id= red class= dect style="display: none;"> 
    Only first DIV displayed
</div>

<div id= blue class= dect style="display: none;"> 
    Only second DIV displayed
</div>

 <div id= green class= dect style="display: none;"> 
   Only third DIV displayed
</div>