Welcome to WebmasterWorld Guest from 54.205.75.60

Forum Moderators: open

Message Too Old, No Replies

Display/Hide options using <div> tags and radiobuttons

   
4:05 pm on Apr 21, 2008 (gmt 0)

5+ Year Member



Hi,

I'm an absolute javascript newbie trying to hide/show certain parts of html code on a jsp by means of a javascript function because that's what I guess I need. So far here's what I got :


function showDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
divs[i].style.visibility="visible";
} else {
divs[i].style.visibility="hidden";
}
}
}

I saw a code very much resembling this one on this site, but I can't quite get it to work. What I want is to be able to dynamically change certain text of a fill-in form depending on wich radiobutton is selected at a given moment.

10:41 am on Apr 22, 2008 (gmt 0)

10+ Year Member



General note...

Using:
document.getElementById('id').style.visibility = 'hidden';
will hide the element, but keep the space which the element occupies.

But Using:
document.getElementById('id').style.display= 'none';
Will hide the element and the space it may consume (other content can use it).... I usually always use this method.

An absolute basic set of functions to show and hide elements....

function showDiv(id) {
document.getElementById(id).style.display = '';
}

function hideDiv(id) {
document.getElementById(id).style.display = 'none';
}

11:59 am on Apr 22, 2008 (gmt 0)

5+ Year Member



What I want is a function that receives a div's id as parameter and shows that one with

divs[i].style.display="block";

and hides all the other divs with


divs[i].style.display="none";

So far, I got this:


function showDiv(pass) {
var divs = document.getElementsByTagName('div');

for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
divs[i].style.display="block";
} else {
divs[i].style.display="none";
}
}
}

That little piece of code does show the ones that aren't displayed in the beginning with


<div id="myId" style="display: none">

I can change those to "block", but I can't do it the other way around (change "block" to "none")