Hide / Show form Elements.

J

jerryyang_la1

I've found this script that allows be to hide/show form elements..

<script language="JavaScript"><!--
var toggle = true;

function show(object) {
if (document.layers && document.layers[object])
document.layers[object].visibility = 'visible';
else if (document.all) {
document.all[object].style.visibility = 'visible';
document.all[object].style.zIndex = 100;
}
}
function hide(object) {
if (document.layers && document.layers[object])
document.layers[object].visibility = 'hidden';
else if (document.all)
document.all[object].style.visibility = 'hidden';
}
//--></script>

<form>
<input type="button" onClick="if (toggle = !toggle) hide('myId');else
show('myId')" value="Show/Hide">
</form>

<div id="myId" style="position: absolute; visibility:
visible;">Test</div>


This works well, but I have a couple questions...

1. Is there anyway to default this to HIDE ?
2. How would I change the button, to a checkbox or image ?
3. Any other script that will do that ?

Thanks
 
R

RobG

I've found this script that allows be to hide/show form elements..

<script language="JavaScript"><!--
Click to expand...

The language attribute is depreciated, type is required. Hiding scripts
is no longer necessary.

var toggle = true;

function show(object) {
if (document.layers && document.layers[object])
document.layers[object].visibility = 'visible';
else if (document.all) {
document.all[object].style.visibility = 'visible';
document.all[object].style.zIndex = 100;
Click to expand...

It will not work in browsers that don't support either document.all or
layers (which is quite a few).
}
}
function hide(object) {
if (document.layers && document.layers[object])
document.layers[object].visibility = 'hidden';
else if (document.all)
document.all[object].style.visibility = 'hidden';
}
//--></script>

<form>
<input type="button" onClick="if (toggle = !toggle) hide('myId');else
show('myId')" value="Show/Hide">
</form>

<div id="myId" style="position: absolute; visibility:
visible;">Test</div>


This works well, but I have a couple questions...
Click to expand...

Then you didn't test it very extensively - it is also very clumsy.

Try:

function showHide( id )
{
var el;
if (document.getElementById) {
el = document.getElementById(id);
} else if (document.all) {
el = document.all[id];
} else if (document.layers) {
el = document.layers( id )
}

if ( el.style ){
el.style.visibility =
('visible' == el.style.visibility)? 'hidden':'visible';
}
}

The button becomes:

<input type="button" onclick="showHide('myId');" value="Show/Hide">

And the div:

<div id="myId" style="visibility: visible;">Here is my div</div>


I'd consider dropping the document.layers bit unless you have enough
Netscape 4 visitors to justify it.
1. Is there anyway to default this to HIDE ?
Click to expand...

Use the above function and in the body tag:

<body onload="showHide('myId');">

That way users without JavaScript will not have the element hidden
(without JS they'll never be able to reveal it).
2. How would I change the button, to a checkbox or image ?
Click to expand...

First, you don't need a form around your button if the button is just
there by itself.

Second, you can use any element that has an onclick attribute (or any
other intrinsic event you choose to use) defined in the HTML spec (which
is most of them). But if you use a checkbox, should the element be
hidden when its selected or shown?

Let's say you want it hidden:

<input type="checkbox" onclick="showHide2(this, 'myId');">Hide the div

<script type="text/javascript">
function showHide2(cb, id)
{
if (!document.getElementById || !document.body.style) return;
var el = document.getElementById( id );
el.style.visibility = (cb.checked)? 'hidden':'visible';
}
3. Any other script that will do that ?
Click to expand...

See above.
 
J

jerryyang_la1

RobG.. Thanks I will try this..

The script I posted, I found on a script site.. It's not one I wrote !!

Thanks again !!

I've found this script that allows be to hide/show form elements..

<script language="JavaScript"><!--
Click to expand...

The language attribute is depreciated, type is required. Hiding scripts
is no longer necessary.

var toggle = true;

function show(object) {
if (document.layers && document.layers[object])
document.layers[object].visibility = 'visible';
else if (document.all) {
document.all[object].style.visibility = 'visible';
document.all[object].style.zIndex = 100;
Click to expand...

It will not work in browsers that don't support either document.all or
layers (which is quite a few).
}
}
function hide(object) {
if (document.layers && document.layers[object])
document.layers[object].visibility = 'hidden';
else if (document.all)
document.all[object].style.visibility = 'hidden';
}
//--></script>

<form>
<input type="button" onClick="if (toggle = !toggle) hide('myId');else
show('myId')" value="Show/Hide">
</form>

<div id="myId" style="position: absolute; visibility:
visible;">Test</div>


This works well, but I have a couple questions...
Click to expand...

Then you didn't test it very extensively - it is also very clumsy.

Try:

function showHide( id )
{
var el;
if (document.getElementById) {
el = document.getElementById(id);
} else if (document.all) {
el = document.all[id];
} else if (document.layers) {
el = document.layers( id )
}

if ( el.style ){
el.style.visibility =
('visible' == el.style.visibility)? 'hidden':'visible';
}
}

The button becomes:

<input type="button" onclick="showHide('myId');" value="Show/Hide">

And the div:

<div id="myId" style="visibility: visible;">Here is my div</div>


I'd consider dropping the document.layers bit unless you have enough
Netscape 4 visitors to justify it.
1. Is there anyway to default this to HIDE ?
Click to expand...

Use the above function and in the body tag:

<body onload="showHide('myId');">

That way users without JavaScript will not have the element hidden
(without JS they'll never be able to reveal it).
2. How would I change the button, to a checkbox or image ?
Click to expand...

First, you don't need a form around your button if the button is just
there by itself.

Second, you can use any element that has an onclick attribute (or any
other intrinsic event you choose to use) defined in the HTML spec (which
is most of them). But if you use a checkbox, should the element be
hidden when its selected or shown?

Let's say you want it hidden:

<input type="checkbox" onclick="showHide2(this, 'myId');">Hide the div

<script type="text/javascript">
function showHide2(cb, id)
{
if (!document.getElementById || !document.body.style) return;
var el = document.getElementById( id );
el.style.visibility = (cb.checked)? 'hidden':'visible';
}
3. Any other script that will do that ?
Click to expand...

See above.
Click to expand...
 
J

jerryyang_la1

<input type="checkbox" onclick="showHide2(this, 'myId');">Hide the div

<script type="text/javascript">
function showHide2(cb, id)
{
if (!document.getElementById || !document.body.style) return;
var el = document.getElementById( id );
el.style.visibility = (cb.checked)? 'hidden':'visible';
}
</script>

I like this idea.. But I would prefer it hidden by default, and shown
when selected.

How do I do that ?? THANKS
 
R

RobG

<input type="checkbox" onclick="showHide2(this, 'myId');">Hide the div

<script type="text/javascript">
function showHide2(cb, id)
{
if (!document.getElementById || !document.body.style) return;
var el = document.getElementById( id );
el.style.visibility = (cb.checked)? 'hidden':'visible';
}
</script>

I like this idea.. But I would prefer it hidden by default, and shown
when selected.

How do I do that ?? THANKS
Click to expand...

Make your div not visible:

<div ... visibility: hidden;">Test</div>


Change the text on the checkbox:

<input type="checkbox" onclick="showHide2(this, 'myId');">Show the div


Adjust the logic of the function:

...
el.style.visibility = (cb.checked)? 'visible':'hidden';


And now users with JS disabled or not available will never see the
content - I guess they could look at the source. :-x

This issue is normally solved by making your page function properly
without any scripting at all, then add script to enhance the 'user
experience'. It is not good to have non-functioning checkboxes and
buttons, so often other UI elements are used.

The example below demonstrates some of this, it runs an onload function
to add the onclick and hide stuff. If the page is big and heavy, the
initialisation script could be added after the last 'container' div so
it runs before the page has fully loaded. Otherwise users may see all
the content displayed, then see it disappear when the onload runs.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Show/hide play</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
.heading {
font-weight: bold; text-decoration: underline;
cursor: pointer; font-family: verdana, sans-serif;
padding-top: 5px; display: block;
}
.content {background-color: #dddddd; padding-left:10px;}
</style>
<script type="text/javascript">
function showHide()
{
var idx = this.id.split('-')[1];
var sp = document.getElementById('cont-'+idx);
sp.style.display = ('' == sp.style.display)? 'none':'';
}

function initContent()
{
// Check that necessary features are supported
if ( !document.getElementById
|| !document.getElementsByTagName
|| !document.body.style){
return;
}
// Get all the div elements we need
var x = document.getElementById('container');
var divs = x.getElementsByTagName('div');
// Depending on classname, add an onclick or hide
var el, i = divs.length;
while ( i-- ){
el = divs;
if (el.className && /\bheading\b/.test(el.className)){
el.onclick = showHide;
} else if (el.className && /\bcontent\b/.test(el.className)){
el.style.display = 'none';
}
}
}
window.onload = initContent;
</script>
</head><body>
<div style="border: 1px solid #ddddff;" id="container">
<div class="heading" id="head-1">
Here is the first heading</div>
<div class="content" id="cont-1">
Here is the first content<br>
Here is the first content<br></div>
<div class="heading" id="head-2">
Here is the second heading</div>
<div class="content" id="cont-2">
Here is the second content<br></div>
</div>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help With a Script 5
Javascript not hiding nested elements simultaneously 2
Show text on-click with transition 2
show/hide layer 3
How do I hide the modal after 5 seconds? 4
Show/Hide form field in IE & Firefox 7
Help nuB with show/hide script 0
Hide/show <div> 1

Members online

Total: 54 (members: 2, guests: 52)
Robots: 481

Forum statistics

Threads
473,994
Messages
2,570,222
Members
46,810
Latest member
Kassie0918

Latest Threads

Top