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

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;

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...

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 ?

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 ?

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 ?

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

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;

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...

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 ?

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 ?

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 ?

See above.
 
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

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top