Menu
Community /Pin to ProfileBookmark
@cootheadJul 26.2013 — #Hi there cinci-hal,
Our friend [b]Vic[/b] supplied a solution whilst I was preparing mine. ?
One minor difference in mine is that, I hide the form from those with javascript disabled.
I also remove event handlers from the HTML. ?
[i]coothead[/i]
hide div when radio button changes
I am trying to hide some content when a radio button is changed. I have been searching the internet for this, but the only thing I found that is close to what I wanted was done in .asp. I tried to convert it, but seeing I do not know Javascript very well, I was unsuccessful. I’m hoping someone here can help me set it right.
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />
<title>Untitled 1</title>
<script language=”javascript”>
window.onload=function(){
var rb = document.getElementsById(‘opt0’);
var d = document.getElementById(‘dvArea’);
if (rb.checked == true) {
d.style.visibility = “visible”;
}
else {
d.style.visibility = “hidden”;
}
};
</script>
</head>
<body>
<form id=”frmOptions”>
<input type=”radio” name=”options” id=”opt0″ checked=”checked” />
<label for=”opt0″>Option 1</label>
<input type=”radio” name=”options” id=”opt1″ />
<label for=”opt1″>Option 2</label>
</form>
<div id=”dvArea”>
Some contents
</div>
</body>
</html
Sign in
to post a comment4 Comments(s) ↴
0
@cootheadJul 26.2013 — #Hi there cinci-hal,Our friend [b]Vic[/b] supplied a solution whilst I was preparing mine. ?
One minor difference in mine is that, I hide the form from those with javascript disabled.
I also remove event handlers from the HTML. ?
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled document</title>
<style>
#container {
width:960px;
margin:auto;
}
.hide{
display:none;
}
#frmOptions label {
cursor:pointer;
}
</style>
<script>
(function() {
'use strict';
function init(){
document.getElementById('frmOptions').className='';
var obj=document.getElementById('dvArea');
var inp=document.getElementById('frmOptions').getElementsByTagName('input');
var c=inp.length;
while(--c>-1) {
inp[c].number=c;
inp[c].onclick=function(){
this.number==0?obj.className='':obj.className='hide';
}
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
})();
</script>
</head>
<body>
<div id="container">
<form id="frmOptions" class="hide">
<input type="radio" name="options" id="opt0" checked="checked">
<label for="opt0">Option 1</label>
<input type="radio" name="options" id="opt1" >
<label for="opt1">Option 2</label>
</form>
<div id="dvArea">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p>
</div>
</div>
</body>
</html>[/color][i]coothead[/i]