Jquery show / hide checkebox data

i want to show checkbox information

like when i check box it shows info of checkedbox and hide other checkbox info

its show / hide checkbox data

here is my try.

$('#mycountry').change(function() {
  if ($(this).prop("checked")) {
    $('#country').show();
  } else {
    $('#name').hide();
  }
});

$('#myname').change(function() {
  if ($(this).prop("checked")) {
    $('#name').show();
  } else {
    $('#country').hide();
  }
});

<input type="checkbox" id="myname" name="myname" checked>
<label for="myname"> Show my name</label><br>
<input type="checkbox" id="mycountry" name="mycountry">
<label for="mycountry"> Show my country</label><br>

<div id="country" style="display: none">
  <span>Canada</span>
</div>

<div id="name">
  <span>Steven</span>
</div>

If you wish to do it by using jQuery, you should replace your code with this:

<script>
  $("#mycountry").change(function () {
    if ($(this).prop("checked")) {
      $("#country").show();
    } else {
      $("#country").hide();
    }
  });

  $("#myname").change(function () {
    if ($(this).prop("checked")) {
      $("#name").show();
    } else {
      $("#name").hide();
    }
  });
</script>

So now if you uncheck to show your name, your name "Steven" will gone.