This seems not to work inside a table. My attempt is at:
http://www.cod.edu/people/faculty/chenpe/PRAIRIE/mktree.html
I'm pretty sure the table is the problem, since it works fine if I
remove the table.
I know my html is probably illegal, but I do want to expand my lists
inside a table.
Using invalid HTML is bad. If fudging the HTML 'works' in a particular
browser, you can guarantee that it will fail in others and likely your
chosen browser too when it decides to adhere more strictly to standards.
The first rule of any web page is to ensure the HTML and CSS validates,
and that any changes to the markup preformed by scripting is also valid.
You have incorrectly nested <li> and <ul> elements - it's pointless
going any further until you fix that. Once you have, apply the stuff in
the snippet of your page below. It adds an onclick to the 'photo' text
to expand/collapse following UL elements.
There is an initialisation function that gets every UL that is a child
of the table (based on the ID passed to the function). The function
goes through all the previous siblings of the UL to find one with class
'pTag' - I've applied it to the photo text using a span element.
The init function won't add anything if certain features aren't
supported, you may wish to extend support to other browsers - e.g.
support for document.all versions of getElementsByTagName and
getElementById - see the group FAQ and DynWrite.
An onclick event is added to the 'pTag' spans that will hide/show
following UL siblings. The expand/collapse all function just looks for
all the ULs inside the table and shows or hides them all based on
whether you pass an empty string or 'none' respectively - no error
checking is done so make sure the right string is passed (or check for
errors...)
Some further tips...
There are some changes to popme() that should make it a little more
efficient.
The depreciated <font...> tags should be replaced with <span> and
preferably classes. You seem to be heading down that track, keep going.
<br> have been used inside <li> elements to create new lines, but it's
better to list each photo as a separate <li> then control the
presentation with CSS (as I've done). You can get more help with the
HTML and CSS in the following new groups (you may be able to do the
hide/show stuff with pure CSS):
CSS: comp.infosystems.
www.authoring.stylesheets
HTML: comp.infosystems.
www.authoring.html
Here's the script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
..botName { font-style: italic; }
..hl_0 { color: red; }
..pTag { color: blue; cursor: pointer; }
..textBut {
color: blue;
text-decoration: underline;
cursor: pointer;
padding: 2px 10px 2px 10px
}
#tableA ul, li {
list-style: none;
padding: 0 0 0 0.5em;
margin: 0;
line-height: 1em;
}
#tableA {
white-space: nowrap;
}
#toggleButtons {
text-align: right;
}
</style>
<script type="text/javascript">
// Checks required features supported and if so,
// adds functions
function initTable( t ){
if (
! document.getElementsByTagName ||
! document.getElementById ||
! document.body.style
) return;
t = document.getElementById( t );
var uls = t.getElementsByTagName( 'ul' );
var i = uls.length;
while ( i-- ) { addClick( uls
); }
// Reveal the show/hide all buttons
document.getElementById('toggleButtons').style.display='';
// And hide all the ULs
showHidAll( 'tableA', 'none' );
}
// Adds toggleUL to the previous sibling of el that
// has a class of 'pTag'
function addClick( el ) {
while ( el ) {
if ( el.className && 'pTag' == el.className ) {
el.onclick = toggleUL;
}
el = el.previousSibling;
}
}
// Goes through all siblings and toggles any UL nodes
// between '' and 'none'
function toggleUL() {
var n = this;
while ( n ) {
if ( 'ul' == n.nodeName.toLowerCase() ) {
n.style.display = ( 'none' == n.style.display )? '' : 'none';
}
n = n.nextSibling;
}
}
function showHidAll( t, d ) {
t = document.getElementById( t );
var uls = t.getElementsByTagName( 'ul' );
var i = uls.length;
while ( i-- ) {
uls.style.display = d;
}
}
function poptops( pophtm, popw, poph) {
popw = popw + 37;
poph = poph + 39;
var win = window.open( '', 'popWin',
'resizable=yes,scrollbars=yes,width=' +
popw + ',height=' + poph);
popme( pophtm, win );
}
function popme( pophtm, win ) {
var add = pophtm.split('=');
var url = add[1];
url = url.replace(/>/,"");
rlt = win.document.open();
rlt.writeln(
'<HTML><HEAD><title>',
url,
'</title><HEAD><BODY onBlur="self.focus()\">',
pophtm,
'</BODY></HTML>'
);
rlt.close();
}
</script>
</head>
<body onload="initTable('tableA');">
<table id="tableA" border="1">
<tr id="toggleButtons" style="display: none;">
<td colspan="4">
<span class="textBut" onclick="
showHidAll( 'tableA', '' );
">Show all</span>
<span class="textBut" onclick="
showHidAll( 'tableA', 'none' );
">Hide all</span>
</td>
<tr>
<td align=right valign=top>12</td>
<td align=center valign=top><span class="hl_0">-</span></td>
<td valign=top><span
class="botName hl_0">Alliaria petiolata</span></td>
<td valign=top><span class="hl_0">GARLIC MUSTARD</span><span
class="pTag"> (1 photo)</span><ul>
<li><a href="Amorpha_canescens.jpg"
onclick="poptops(
'<IMG SRC=Amorpha_canescens.jpg>',
800,600); return false;"
onmouseover="status='image';return true"
onmouseout="status='';return true">photo 2005_04_30</a>
Elsen's Hill</li>
</ul>
</td>
</tr>
<tr>
<td align=right valign=top>16</td>
<td align=center valign=top>0</td>
<td valign=top><span
class="botName">Ambrosia trifida</span><span
class="pTag"> (1 photo)</span><ul>
<li><a href="Amorpha_canescens.jpg"
onclick="poptops(
'<IMG SRC=Amorpha_canescens.jpg>',
800,600); return false;"
onmouseover="status='image';return true"
onmouseout="status='';return true">photo 2005_07_11</a></li>
</ul>
</td>
<td valign=top>GIANT RAGWEED</td>
</tr>
<tr>
<td align=right valign=top>17</td>
<td align=center valign=top>9</td>
<td valign=top><span
class="botName">Amorpha canescens</span><span
class="pTag"> (2 photos)</span><ul>
<li><a href="Amorpha_canescens.jpg"
onclick="poptops(
'<IMG SRC=Amorpha_canescens.jpg>',
800,600); return false;"
onmouseover="status='image';return true"
onmouseout="status='';return true">photo 2005_06_14</a></li>
<li><a href="Amorpha_canescens.jpg"
onclick="poptops(
'<IMG SRC=Amorpha_canescens.jpg>',
800,600); return false;"
onmouseover="status='image';return true"
onmouseout="status='';return true">photo 2005_06_29</a></li>
</ul>
</td>
<td valign=top>LEAD PLANT</td>
</tr>
</table>
</body>
</html>