Hide/unhide DIV sections with a checkbox

[jhrbek]

I was wondering if someone could tell me what i'm doing wrong here. Real simple code, but it doesn't work. :(

BTW, I really only care for this to work with IE 6+

<script type=text/javascript>
<!--

// Show/Hide function
function showMe(id) { // This gets executed when the user clicks on the checkbox
document.poppedLayer = eval('document.all[\'id\']'); // This evaluates whether the checkbox is checked or not

if (document.poppedLayer) { // if it is checked, make it visible, if not, hide it
document.poppedLayer.style.visibility = "visible";
} else {
document.poppedLayer.style.visibility = "hidden";
}
}

//-->
</SCRIPT>

<div id="div1">
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<table border=1 id="t1">
<tr>
<td>i am here!</td>
</tr>
</table>
</div>

<input type="checkbox" name="c1" onclick=showMe(div1) value="Show Active">Show Hide Checkbox

[gil davis]

Originally posted by jhrbek
document.poppedLayer = eval('document.all[\'id\']'); // This evaluates whether the checkbox is checked or notNo it doesn't. It gives you a pointer to the object that you are trying to hide. Besides, you have a nested quotes error.

To test whether the checkbox was checked, you would have to usedocument.all["c1"].checked

[khalidali63]

Here you go I have made changes so that it works with NS6+ as well


function showMe(id) { // This gets executed when the user clicks on the checkbox
var obj = document.getElementById(id);
if (obj.style.visibility=="hidden") { // if it is checked, make it visible, if not, hide it
obj.style.visibility = "visible";
} else {
obj.style.visibility = "hidden";
}
}

//-->
</SCRIPT>

<div id="div1">
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<table border=1 id="t1">
<tr>
<td>i am here!</td>
</tr>
</table>
</div>
<input type="checkbox" name="c1" onclick=showMe('div1') value="Show Active">Show Hide Checkbox



Cheers

Khalid

[jhrbek]

so do I still need that eval() function then?

[jhrbek]

khalidali63, Thanks for the help! That works great. :)

-joe

[gil davis]

If you would like a working example, here it is:
<script>
function showMe (it, box) {
var vis = (box.checked) ? "visible" : "hidden";
document.getElementById(it).style.visibility = vis;
}
</script>
<div id="div1">
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<table border=1 id="t1">
<tr>
<td>i am here!</td>
</tr>
</table>
</div>
<form>
<input type="checkbox" name="c1" onclick="showMe('div1', this)" checked>Show Hide Checkbox
</form>

[jhrbek]

Thanks for help everyone! ...I have one more question though. :)

I used that code to hide a big table of data on the screen, but now that it is hidden, there is a big white space where the data used to be. Consequently, that data that I wanted to see is way at the bottom of the page. Is there a way to bring the html code that was after the hidden table appear at the top of the webpage when the table is hidden, and then go back to where it should be when the table is not hidden?

[Nevermore]

Quite simple really - just use display instead of visibility.

[gil davis]

function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}

[jhrbek]

This won't unhide it though. :) It only hides it. :D

function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}

[gil davis]

This won't unhide it though.Works for me... IE 5.5

[jhrbek]

IE 6 says that it cannot get the display property.

[gil davis]

Perhaps someone else can help. From the documentation, I see no reason why display should work any differently in IE 6. Perhaps there is something else in you r code that is broken. Try my file (see attachment).

[Nevermore]

Works for me in IE6. Strange...

[m00nbeast]

This is just what I was looking for. How do I get it to have the div hidden on load?

[Selrach]

in the original style definition of the div set display:hidden;

[m00nbeast]

Like this?



<script type="text/javascript">

function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}

</script>


show/hide: <input type="checkbox" name="multi_note" value="1" onclick="showMe('div1', this)">


<div id="div1" style="display:block; display:hidden;">
<table border=1 id="t1">
<tr>
<td>i am here!</td>
</tr>
</table>
</div>


It still shows on the initial page load.

Also I want it to show the div when checked so I guess I need to make some sort of change right here?
var vis = (box.checked) ? "block" : "none";

[m00nbeast]

Thanks for your time and help but I figured it out by playing with it:

<div id="div1" style="display:none;">

[m00nbeast]

New question, how can I change this script so that it's a link (I want to use an image) that hides/unhides the div instead?

[gil davis]

Change this bit:

<div id="div1">

to this:

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

You won't see it onload.

[JMRKER]

Alter as follows:


<html>
<head>
<title>CB Hide/Show</title>
<script type="text/javascript">
<!--
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>
</head>
<body>
<h3 align="center"> This JavaScript shows how to hide divisions </h3>

<div id="div1" style="display:none">
<table border=1 id="t1">
<tr>
<td>i am here!</td>
</tr>
</table>
</div>

<form>
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
</form>
</body>
</html>

[JMRKER]

Try this:

<html>
<head>
<title>CB Hide/Show</title>
<script type="text/javascript">
<!--
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
function showMe2 (it) {
var vis = document.getElementById(it).style.display
if (vis == "block") { document.getElementById(it).style.display = "none"; }
else { document.getElementById(it).style.display = "block"; }
}
//-->
</script>
</head>
<body>
<h3 align="center"> This JavaScript shows how to hide divisions </h3>

<div id="div1" style="display:none">
<table border=1 id="t1">
<tr>
<td>i am here!</td>
</tr>
</table>
</div>

<form>
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<br />
Alternatively:
<a href="#" onClick="showMe2('div1')">Show/Hide Link</a>
</form>
</body>
</html>

[nsath]

I have created the following using dreamweaver MX final. On check and only of the checkbox yes should it show the div acquireDetail. As far as I have gotten I have hidden the div even on initial opening of the webpage but it is the showing of the div that I'm having problems. Can anyone help me please

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript">
function showAcquireDetails(){
var cY = getAttribute('type') == checkbox
do{
document.getElementById("acquireDetails").style.visibilty = "visible";
}
while(cY.checked==true)
}
</script>
</head>
<body>
<br>
<br>
<center> <img src=""> </center>
<br>
<br>
<center> <h2> Software Build Request Form </h2> </center>
<br>
<center> <table> <tr> <td width="900"> If you wish for a Software to be developed for your personal/ business use by M.N.G.R I.T Specialists, please take the time to read and answer the following questions carefully.
<br>
<br>
<b> Note: </b>
<br>
The more accurate and specific the answers you provide, the less the time required to build and document the software and the better the product will meet your requirements.</td>
</tr>
</table>
</center>
<br>
<form name="softwareRequest">
<center>
<table>
<tr>
<td> Already A Member? </td>
<td width="100"> <input name="cY" type="checkbox" onclick="showAcquireDetails(acquireDetails)" value=""/> Yes </td>
<td>
<div id="acquireDetails" style="display:none;"> // This part works fine as even on initial opening of the window, the divs hidden
<table>
<tr>
<td>Please Enter Your Membership Number:</td>
<td> <input type="text" name="MemberNo" value="" /></td>
</tr>
</table>
</div>
</td>
<tr>
<td> </td>
<td width="100"> <input type="checkbox" name="" value="" /> No </td>
</tr>
</tr>
</table>
</center>
</form>
</body>
</html>

[JMRKER]

See if you can use these changes ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript"> <!-- archaic form: language="javascript" -->
// From: http://www.webdeveloper.com/forum/showthread.php?p=1104227#post1104227

function showAcquireDetails(IDS,flag) { // alert(document.getElementById(IDS).id);
if (flag == 'Yes') { document.getElementById(IDS).style.display = "block"; }
else { document.getElementById(IDS).style.display = "none"; }
}
</script>
</head>
<body>
<br> <br>

<center>
<img src=""> </center>
<br> <br>
<center> <h2> Software Build Request Form </h2> </center>

<br>
<table align="center">
<tr>
<td width="500">
If you wish for a Software to be developed for your personal / business use by M.N.G.R I.T Specialists,
please take the time to read and answer the following questions carefully.
<br>
<br>
<b> Note: </b>
<br>
The more accurate and specific the answers you provide,
the less the time required to build and document the software
and the better the product will meet your requirements.
</td>
</tr>
</table>
</center>

<br>

<form name="softwareRequest" onsubmit="return false"> <!-- change submit later -->
<center>
<table>
<tr>
<td valign="top">
Already A Member?
</td>
<td width="100">
<input name="Member" type="radio"
onclick="showAcquireDetails('acquireDetails',this.value)" value="Yes"> Yes
<div id="acquireDetails" style="display:none">
<p> Please Enter Your Membership Number:
<input type="text" name="MemberName" value="">
</div>
</td>
</tr>

<tr>
<td>&nbsp;</td>
<td width="100">
<input name="Member" type="radio"
onclick="showAcquireDetails('acquireDetails',this.value)" value="No"> No
</td>
</tr>
</table>
</center>

</form>
</body>
</html>


BTW: You should put your sample code between [ code] and [ /code] tags (without the spaces)
to make it easier for the forum members to read.

[nsath]

Nop, doesn't seem to work but I tried something I saw somewhere else and got it work the only problem now is that I have added a reset button and it unchecks the checkbox but the div is still showing. I also need to find how to limit the checkboxes checked If yes checked there should be no room for no to be checked as well.

What I did is this:

<script language="javascript">
function showAcquireDetails(acquireDetails,box){
var vis = (box.checked) ? "block": "none";
document.getElementById(acquireDetails).style.display = vis;
}
</script>

My Idea was to use a do while loop within the function. I know it have started something like as follows:

var x = document.all[Member.checked == true]||document.all[Member.checked == false]

but I became unsure as how to take it further

[JMRKER]

Nop, doesn't seem to work ...

That does not help very much. :eek:
What was wrong with it?
It worked fine for me.

What browser are you using?
Do you have an example link where you have the code available to view and see the error (?) that is causing you fits?

[nsath]

My bad, I pasted what you provided into what I had done and it'z a mash up. That's why it didn't work. I tried what you provided which works fine and what I have done works fine as well. IE8 and thanks anyway