jquery - How do you show/hide a div with Javascript? -

i'm trying use javascript show/hide div's content depending on radio button selected. have onchange function use change the div content 1 div another, doesn't work. if can in jquery instead thats ok im not familiar jquery if update jsfiddle appreciativw :) here jsfiddle: https://jsfiddle.net/markusbond/au77ladg/ appreciated :)

javascript:

    function changeselection() {          if (document.getelementbyid("selectiontables").checked) {             document.getelementbyid("populatecheckboxes").show;             document.getelementbyid("unpopulatecheckboxes").hidden;         } else {             document.getelementbyid("unpopulatecheckboxes").show;             document.getelementbyid("populatecheckboxes").hidden;         }     } 

html:

<form role="form">   <div class="row">     <!--this onchange call-->     <div class="radio col-xs-2" id="populateselection" onchange="changeselection()">       <!--this first radio button-->       <label>         <input type="radio" name="optradio" id="selectiontables" />use tables       </label>&nbsp;&nbsp;       <!--this second radio button-->       <label>         <input type="radio" name="optradio" id="selectionviews" />use views       </label>     </div>     <!--this first changed div-->   </div>   <div class="row" id="populatecheckboxes">     <div class="checkbox">       <label>         <input type="checkbox" id="selectioncondition" />condition       </label>     </div>     <div class="checkbox">       <label>         <input type="checkbox" id="selectiondistribution" />distribution       </label>     </div>     <div class="checkbox">       <label>         <input type="checkbox" id="selectionprogram" />program       </label>     </div>     <div class="checkbox">       <label>         <input type="checkbox" id="selectiontreatment" />treatment       </label>     </div>   </div>   <!--this second changed div-->   <div class="row" id="unpopulatecheckboxes"></div> </form> 

this correct way

  <script>    function changeselection() {         if (document.getelementbyid("selectiontables").checked) {           document.getelementbyid("populatecheckboxes").style.visibility = "hidden";         document.getelementbyid("unpopulatecheckboxes").style.visibility = "visible";       } else {         document.getelementbyid("unpopulatecheckboxes").style.visibility ="hidden";         document.getelementbyid("populatecheckboxes").style.visibility = "visible";       }   }  </script> 

you using

document.getelementbyid("unpopulatecheckboxes").hidden; 

but should

document.getelementbyid("populatecheckboxes").style.visibility = "hidden"; 

hope helps