I have two radio buttons. I need to hide/show a div tag based on selected radio button

I select a radio button while loading the body (actually it's based on db value).

What I need as output is, I need to hide/show a div tag during the body load itself, but based on selected radio button.

here is the code i have tried.

```
<html>
       <head>
             <title>show-hide-div-on-click-using-jquery</title>

</head>
 <?php
 $r="r2";

echo "<body onload=\"calls('$r')\">";?>
     <center>
              <div style="padding:25px;width: 100px;">
                   <input id="id1" type="radio" name="name_radio1" value="r1" />Radio1
                   <input id="id2" type="radio" name="name_radio1" value="r2" />Radio2
              </div>
              <div align="center" style="padding:25px;width: 300px;">
                   <div id="div1">This is First (1st) division</div>
                   <div id="div2">This is Second (2nd) division</div>
              </div>
     </center>
     <script src="js/jquery-1.11.1.min.js"></script>
             <script type="text/javascript">
                 $(document).ready(function () {
                    $('#id1').click(function () {
                       $('#div2').hide();
                       $('#div1').show();
                });
                $('#id2').click(function () {
                      $('#div1').hide();
                      $('#div2').show();
                 });
               });
                 function calls (r) {
                   if(r=="r1"){
    document.getElementById('id1').checked=true;
}
else{
    document.getElementById('id2').checked=true;
}
                 }
</script>
</body>
</html>

```

But this code is not working as I expected. It hides/shows the div tag when I click a radio button.

I know I have to change the `click` by any other, since this function works only on clicking the radio button, but I don't know what to use instead of this `click`.