This seems simple but I don't know what I'm doing really. I have 2 radio buttons and depending on which one is selected the contents of a div will change. Right now I have 2 divs inside a parent div but it would just hide one div and show the other. This wouldn't be bad if they didn't take up space even 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 like to have it so only one div is visible at a time depending on which radio button is checked, and don't have them take up space when they're not in the div. Thanks!

This seems simple but I don't know what I'm doing really. I have 2 radio buttons and depending on which one is selected the contents of a div will change. Right now I have 2 divs inside a parent div but it would just hide one div and show the other. This wouldn't be bad if they didn't take up space even 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 like to have it so only one div is visible at a time depending on which radio button is checked, and don't have them take up space when they're not in the div. Thanks!

• javascript
• html
• function
• radio-button
• onchange

5 Answers 5

If you want those divs to stop taking space, you have to use display:none instead of visibility:hidden, change your 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

visibility property will always use the space whenever it is hidden.

Better approach would be to use display property.

Something like this:

document.getElementById("div2").style.display= "none"; //similar to hidden
document.getElementById("div1").style.display= "block"; // visible 

You are using visibility: hidden to hide the divs, which hides them but let them take space in the browser, try instead the display property, instead of using hidden use none, and instead of using visible use block.

You have to understand first the difference between the display and visibility properties.

display - none - when you do display none that means whole element from DOM will hide with its physical existence in DOM.So, there will be no space allocation for that element in DOM.

Visibility - hidden - In this case , you are hiding only that element but physically that element is present in that space.So, space will be allocate that element.

for more details please follow this

Using just one div and change content

DEMO

HTML

<body onload='chooseDiv();'>
<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"></div>
</div>

<div style='display:none'>
    <div id='c1'><span>TEST 1</span><img src='http://cdn.sstatic/stackoverflow/img/[email protected]?v=hiFacebook'/></div>
     <div id='c2'><span>TEST 2</span><img src='http://zelcs./wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg' /></div>
</div>

</body>

JS

   function chooseDiv() {
    var div = document.getElementById("div1");
    var msg =  document.getElementById("c1").innerHTML;

    if (!document.getElementById("selectionDiv1").checked) {
        msg = document.getElementById("c2").innerHTML;
    }

    div.innerHTML = msg;
}