How to change div contents with javascript

Question

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!

score 3 · Accepted Answer · answered Jun 29 '15 at 18:18

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

score 2 · Answer 2 · edited Jun 30 '15 at 02:24

2

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

edited Jun 30 '15 at 02:24

Pang

9,564
146
81
122

answered Jun 29 '15 at 18:20

Varun

597
7
26

score 1 · Answer 3 · answered Jun 29 '15 at 18:20

1

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.

answered Jun 29 '15 at 18:20

Matias

641
5
17

score 1 · Answer 4 · edited May 23 '17 at 12:29

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

Mate · Answer 5 · 2015-06-29T19:03:33.713

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.net/stackoverflow/img/apple-touch-icon@2.png?v=hiFacebook'/></div>
     <div id='c2'><span>TEST 2</span><img src='http://zelcs.com/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;
}

Your answer is awesome but in my project i actually have graphs in each div, i just used the text to make the example easier to understand — Markus, Jun 29 '15 at 18:34
Great, you can set html content inside innerHTML. ex: innerHTML = '
' — Mate, Jun 29 '15 at 18:40

How to change div contents with javascript

5 Answers5