Open div on checkbox

Each checkbox opens a div with the corresponding number and clicking again will close it.

by M Shameer

HTML

<p>
  <label>
    <input type="checkbox" name="CheckboxGroup" value="checkbox" id="CheckboxGroup_0"> 1
  </label>
  <br>
  <label>
    <input type="checkbox" name="CheckboxGroup_" value="checkbox" id="CheckboxGroup_1"> 2
  </label>
  <br>
  <label>
    <input type="checkbox" name="CheckboxGroup_" value="checkbox" id="CheckboxGroup_2"> 3
  </label>
  <br>
  <label>
    <input type="checkbox" name="CheckboxGroup_" value="checkbox" id="CheckboxGroup_3"> 4
  </label>
  <br>
  <label>
    <input type="checkbox" name="CheckboxGroup_" value="checkbox" id="CheckboxGroup_4"> 5
  </label>
</p>


<div class="boxes One">1</div>
	<div class="boxes Two">2</div>
	<div class="boxes Three">3</div>
	<div class="boxes Four">4</div>
	<div class="boxes Five">5</div>

JavaScript

$(".boxes").hide();
$("#CheckboxGroup_0").click(function() {
    if($(this).is(":checked")) {
        $(".One").show(300);
    } else {
        $(".One").hide(200);
    }
});

	$("#CheckboxGroup_1").click(function() {
    if($(this).is(":checked")) {
        $(".Two").show(300);
    } else {
        $(".Two").hide(200);
    }
});
	
	$("#CheckboxGroup_2").click(function() {
    if($(this).is(":checked")) {
        $(".Three").show(300);
    } else {
        $(".Three").hide(200);
    }
});
	
	$("#CheckboxGroup_3").click(function() {
    if($(this).is(":checked")) {
        $(".Four").show(300);
    } else {
        $(".Four").hide(200);
    }
});
	
	$("#CheckboxGroup_4").click(function() {
    if($(this).is(":checked")) {
        $(".Five").show(300);
    } else {
        $(".Five").hide(200);
    }
});