homepage Welcome to WebmasterWorld Guest from 23.20.63.27
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Display/Hide options using <div> tags and radiobuttons
caclratm




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

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.

 

stuartc1




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

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';
}

caclratm




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

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")

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved