Martin Kurz wrote:
. . schrieb:
Hi
I need some help with java script . I have a ASPX page that is pulling a
user message heading from the table on the page . The user message
header has message body which suppose to dispay under the heading when a
user click on the message header . Message body will come from database
table .The different message header has different message body . I have
got the message heading showing up on the web page . How do I show the
message body show under the header . Here is an example of what I like
to do
Message header : Break time ( this is a click )
Message Body : Please take the break on time and come back to work on
time
One possible way is, packing all the bodies in not displayed div-containers, ie
like the following:
Having things hidden by default then exposed by script means that anyone
with scripting disabled or not available has no way of finding the
hidden content.
<h1><a href="#" onclick="showBody(1);">Break time</a></h1>
Using an A element solely to create a clickable element is not a good
idea. Much better to put the onclick directly on the element and use
CSS to provide the UI hints that it can be clicked on.
If an A element is used, then using href="#" will cause most browsers to
scroll to the top of the page when the element is clicked - very
annoying if the user has scrolled the page down at all.
The href should link to a page the does something useful (e.g. replicate
the functionality of the onclick) and the onclick should return false to
prevent following the link if scripting is enabled (it will also stop
any scrolling caused by #).
Some would also argue that using an H1 element purely for its style
attributes is contrary to good design, use CSS instead.
<div id="body1" class="bodytext">Please take the break on time and come back to
work on time</div>
<h1><a href="#" onclick="showBody(2);">Break time</a></h1>
<div id="body2" class="bodytext">Please take the break on time and come back to
work on time</div>
and so on
Next thing: Define your CSS for hiding the message-bodies:
.bodytext {
display: none;
}
And now you need the function for displaying the message body:
function showBody(bodyNumber) {
var bodyID = "body_" + bodyNumber;
document.getElementById(bodyID).style.display = block;
The display value 'block' must be quoted, and it is much better to
toggle between '' and 'none' using a single function.
}
If the user clicks the Header, the body will be shown.
Only if scripting is enabled, otherwise they will just see the page
scroll to the top and wonder what is going on.
And to make it a little bit nicer for people without JS, you can set the
display: none by JS, so people withou JS will allways see the message bodies.
Simply change the class to "display: block;" and on load of the document, you
apply something like this:
There is no need to put the class into a CSS rule, it is just for
convenience. If a single showHide() function is created that toggles
between '' and 'none', then the intialisation function just has to call
that and the divs will be hidden.
The divs may have more than one class, so it is always good to test the
class name as a whole string - but after testing that the div has a
class and that the style object is supported.
Finally, the scope of getElementsByTagName can be constrained by putting
all the divs of interest inside another element (say a div) so not every
single div in the document is looped over.
A basic design problem is how to identify the content to be hidden when
the header is clicked on. An ID can be used as here, another way is to
use the document structure and know that the element to hide is say the
first div after the one that was clicked on - but that requires that the
document adhere to the particular structure chosen and any variances may
create difficult to find errors.
var elements = document.getElementsByTagName("div");
for(var i=0; i<elements.length; i++) {
if (elements[i].className == "bodytextvisible") {
elements[i].style.display = "none";
}
}
[...]
Tested in IE and Firefox:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Show/hide content</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
..headDiv {
font-weight: bold;
text-decoration: underline;
font-size: 150%;
}
</style>
<script type="text/javascript">
function showHide(el)
{
el.style.display = ('none' == el.style.display)? '' : 'none';
}
function toggleEl( el )
{
var id = 'cont-' + el.id.split('-')[1];
showHide(document.getElementById(id));
}
function initDivs( id )
{
if (document.getElementById && document.getElementsByTagName) {
var divs = document.getElementById(id).getElementsByTagName(' div');
if ( divs && divs[0].style ) {
var d;
var i = divs.length;
var re = /\bheadDiv\b/;
while ( i-- ) {
d = divs[i];
if ( re.test(d.className) ){
toggleEl( d );
d.onclick = function() {toggleEl(this);};
d.style.cursor = 'pointer';
}
}
}
}
}
</script>
</head>
<body onload="initDivs('messageHolder');">
<div id="messageHolder">
<div class="headDiv" id="head-1">Here is a header 1</div>
<div class="contDiv" id="cont-1">Here is the content 1</div>
<div class="headDiv" id="head-2">Here is a header 2</div>
<div class="contDiv" id="cont-2">Here is the content 2</div>
<div class="headDiv" id="head-3">Here is a header 3</div>
<div class="contDiv" id="cont-3">Here is the content 3</div>
</div>
</body>
</html>
--
Rob
