html - How to change div contents with javascript -

this seems simple don't know i'm doing really. have 2 radio buttons , depending on 1 selected contents of div change. right have 2 divs inside parent div hide 1 div , show other. wouldn't bad if didn't take space when they're invisible.

html:

<div>     <form role="form">         <div>             <div class="radio" id="radioselection" onchange="choosediv()">                 <label>                     <input type="radio" name="optradio" id="selectiondiv1" checked />choose div1                 </label>                 <label>                     <input type="radio" name="optradio" id="selectiondiv2" />choose div2                 </label>             </div>         </div>     </form> </div>  <div id="parentdiv">     <div id="div1">you're awesome!</div>     <div id="div2">everybody loves you!</div> </div> 

javascript:

function choosediv() {     if (document.getelementbyid("selectiondiv1").checked) {         document.getelementbyid("div2").style.visibility = "hidden";         document.getelementbyid("div1").style.visibility = "visible";     } else {         document.getelementbyid("div2").style.visibility = "visible";         document.getelementbyid("div1").style.visibility = "hidden";     } } 

so i'd have 1 div visible @ time depending on radio button checked, , don't have them take space when they're not in div. thanks!

if want divs stop taking space, have use display:none instead of visibility:hidden, change function to

function choosediv() {     if (document.getelementbyid("selectiondiv1").checked) {         document.getelementbyid("div2").style.display = "none";         document.getelementbyid("div1").style.display = "block";     } else {         document.getelementbyid("div2").style.display = "block";         document.getelementbyid("div1").style.display = "none";     } } 

working plnkr: http://plnkr.co/edit/h4c9c7dad324qjugesmf?p=preview