How to change the content of a div using javascript
It seems simple, but I don't know what I am doing. I have 2 radio buttons and depending on which one is selected the content of the div will change. Right now I have 2 divs inside the parent div, but it will just hide one div and show the other. It would be nice if they didn't take up space, even if they are 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 would like it to only show one div at a time, depending on which radio button is set, and don't take up space when they are not in the div. Thank you!
source to share
If you want those divs to stop taking up space, you need 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
source to share
visibility
the property will always use the space whenever it is hidden.
Better approach would be to use property display
.
Something like that:
document.getElementById("div2").style.display= "none"; //similar to hidden
document.getElementById("div1").style.display= "block"; // visible
source to share
Take a look at this link http://www.w3schools.com/css/css_display_visibility.asp . This clearly explains the difference between visibility and display
source to share
You must first understand the difference between properties display
and visibility
.
display - none - when you do display none
it means all element from DOM will hide with its physical existence in DOM.So, no space will be allocated for this element in DOM.
The visibility is hidden . In this case, you are hiding only this element, but physically this element is present in this space. Thus, the space will highlight this element.
for more details please follow this
source to share
Using only one div and changing content
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;
}
source to share