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
