By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,665 Members | 1,912 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,665 IT Pros & Developers. It's quick & easy.

Hide / Show form Elements.

P: n/a
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

Sep 8 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
je***********@yahoo.com wrote:
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.

<script type="text/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;
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';
}
</script>
3. Any other script that will do that ?


See above.

--
Rob
Sep 8 '05 #2

P: n/a
RobG.. Thanks I will try this..

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

Thanks again !!
RobG wrote:
je***********@yahoo.com wrote:
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.

<script type="text/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;


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';
}
</script>
3. Any other script that will do that ?


See above.

--
Rob


Sep 8 '05 #3

P: n/a
<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

Sep 8 '05 #4

P: n/a
je***********@yahoo.com wrote:
<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[i];
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>

--
Rob
Sep 9 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.