clintonG wrote:
[...]
Thank you Rob.
Note the code as shown includes redundant </head> and <body> tags
which I delineate as shown above.
Err... copy/paste error. I
The code does not function in FF or NS (Mozilla browsers) but it is very
It should, I develop using Firefox and then test in IE. Even
with the errant head and body tags, it works for me in all
browsers I have.
impressive when used with IE and nearly exactly what I want (especially
the nice touch with the .outer and .inner classes so thank you again.
I am going to spend some time with it to determine what methods may
need to be modified to enable the script to function with Mozilla DNA
(FF/NS browsers) which has been a real pain so far.
If you use MS documentation and IE for development, that will be
the case. Use Firefox/Mozilla/etc. and w3c specs and you'll
have fewer issues, though you need a few tricks here and there
to support older IE browsers and maybe Netscape 4 & 6.
I also need to use an iFrame within the div the inner class which will load
a server-side page (aspx) to run wizards for account logins and such and
then will need to determine how to collapse this.nextSibling once the
server-side .aspx process has completed. Comments appreciated.
I used nextSibling as a convenience, rather than a
getElementById or Tag method. You need to design the structure
of your HTML to fit your model for creating dynamic content on
the page.
The idea is to create a link between the element that will be
clicked on with the one that will be collapsed. This can be
done with IDs or the relationship of the elements (e.g.
nextSibling).
Using ID requires some parsing either at the server or on the
client to ensure the link points at the right element and all
IDs remain unique in the page. e.g. your headings could all have
enumerated ids: id="header-01" ..."header-02", etc. and the
content to collapse: id="content-01" ..."content-02" etc.
When the header is clicked on, if it's id="header-01" then
collapse/expand element with id="content-01" (see sample below)
Using element relationships restricts page layout options -
change the layout and your relationship model may break. But
it's not dependent on the generation of unique IDs, so you can
just plonk the content on the page.
I also just recalled reading that the use of the 'this' keyword is what may
be problematic with Mozilla's event handlers. I'll try to verify that later
this
evening and hope to return with results.
As far as I know, 'this' works fine in Mozilla. The event
models in IE and the 'zillas are quite different, but that
should not cause you any issues in this case.
You can avoid using 'this' completely if you like and just pass
"event" - see toggleDisplay0() below. If you want to get really
fancy, you can add toggleDisplay() to all spans with
id="header-" using JS when the page loads to save some coding -
keeps the HTML clean.
<html><head><title>play</title>
<style type="text/css">
.outer {border: 1px solid blue; background-color: #7777dd;
color: #000066; padding: 5px;}
.inner {border: 1px solid blue; background-color: #eeeeff;
color: #333366; padding: 5px;}
</style>
<script type="text/javascript">
// Expects the element reference to be passed to it
function toggleDisplay(i) {
var cont = i.id.split('-')[1];
var x = document.getElementById('content-' + cont);
if (x.style) {
if (x.style.display == '') {
x.style.display='none'
} else {
x.style.display='';
}
}
}
// Uses the event to find the element clicked on
function toggleDisplay0(e) {
e = e || window.event;
var y = e.target || e.srcElement;
var n = y.id.split('-')[1];
if (document.getElementById) {
var x = document.getElementById('content-' + n);
} else if (document.al) {
var x = document.all('content-' + n);
}
if (x.style) {
if (x.style.display == '') {
x.style.display='none'
} else {
x.style.display='';
}
}
}
</script>
</head><body>
<div class="outer"><span id="header-01" onclick="
toggleDisplay(this);">Click to display/hide
content 1</span><div class="inner" id="content-01">
Here is the content 1 Here is the content 1
Here is the content 1 Here is the content 1
Here is the content 1 Here is the content 1
Here is the content 1 Here is the content 1
Here is the content 1 Here is the content 1
</div></div>
<div class="outer"><span id="header-02" onclick="
toggleDisplay0(event);">Click to display/hide
content 2</span><div class="inner" id="content-02">
Here is the content 2 Here is the content 2
Here is the content 2 Here is the content 2
Here is the content 2 Here is the content 2
Here is the content 2 Here is the content 2
Here is the content 2 Here is the content 2
</div></div>
<script type="text/javascript">
if (document.getElementsByTagName){
var divs = document.getElementsByTagName('div');
} else if (document.all) {
var divs = document.all.tags('DIV');
}
for (var i=0, len=divs.length; i<len; i++){
if (divs[i].style && divs[i].className == 'inner') {
divs[i].style.display = 'none';
}
}
</script>
</body></html>
--
Rob
