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

expand and collapse all

P: n/a
I use the click-to-expand menu at
http://javascript.internet.com/navig...pand-menu.html

This works fine, but is there a way to expand or collapse all the
menus?
An example of how I use this is here:
http://www.cod.edu/people/faculty/ch...RIE/index.html

Thanks!

Jul 23 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
pe***@for-wild.org wrote:
I use the click-to-expand menu at
http://javascript.internet.com/navig...pand-menu.html

This works fine, but is there a way to expand or collapse all the
menus?
An example of how I use this is here:
http://www.cod.edu/people/faculty/ch...RIE/index.html

Thanks!


Try this:

<URL:http://www.mattkruse.com/javascript/mktree/>

--
Rob
Jul 23 '05 #2

P: n/a
This seems not to work inside a table. My attempt is at:
http://www.cod.edu/people/faculty/ch...IE/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.

Any suggestions?

Jul 23 '05 #3

P: n/a
pe***@for-wild.org wrote:
This seems not to work inside a table. My attempt is at:
http://www.cod.edu/people/faculty/ch...IE/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[i] ); }
// Reveal the show/hide all buttons
document.getElementById('toggleButtons').style.dis play='';
// 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[i].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>
--
Rob
Jul 23 '05 #4

P: n/a
RobG wrote:
[...]
#tableA ul, li {
list-style: none;
padding: 0 0 0 0.5em;
margin: 0;
line-height: 1em;
}


For better display of the photo links, replace the above with:

#tableA ul {
list-style: decimal;
padding: 0 0 0 2em;
margin: 0 0 2px 0;
line-height: 1em;
}

[...]
--
Rob
Jul 23 '05 #5

P: n/a
Thanks for the code. This seems to work for the table.
How can I get it to show/hide the whole page, including bullets outside
the table?

Jul 23 '05 #6

P: n/a
pe***@for-wild.org wrote:
Thanks for the code. This seems to work for the table.
How can I get it to show/hide the whole page, including bullets outside
the table?


Your HTML is still invalid and your script seems to be way too heavy.

You have the following structure (with much tag content stripped):

<td>
<ul class="mktree" id="clade">
<li><i>Asclepias incarnata</i>
<font color=blue> (3 photos)</font>
<ul>
<a href="">photo 2005_07_06</a><br>
<a href="">photo 2005_07_12</a><br>
<a href="">photo 2005_07_14</a>
</li>
</UL>
</td>
This is invalid HTML - a UL element *must* have one or more LI elements
for children and nothing else.

<URL:http://www.w3.org/TR/html4/struct/lists.html#edef-UL>

You are also persisting with depreciated <font> tags, these should be
replaced with <span> tags. You shouldn't use <br> elements in this
context, use <li> elements to create a normal <ul> structure for the
photo linkss. All this was covered previously.

A valid structure would be:

<td>
<ul class="mktree" id="clade">
<li><i>Asclepias incarnata</i>
<span style="color: blue;"> (3 photos) </span>
<ul>
<li><a href="...">photo 2005_07_06</a></li>
<li><a href="...">photo 2005_07_12</a></li>
<li><a href="...">photo 2005_07_14</a></li>
</ul>
</li>
</UL>
</td>

You absolutely *must* fix the HTML, attempting any fixes before then is
futile.

The closing </li> tags are optional, but very useful. Closing </ul>
tags are mandatory. I guess you have a server generating your pages,
but that is not an excuse for crappy HTML.

You also have JS processing that appears to be adding nodes and
modifying things. If that occurs on top of invalid HTML, the results
are guesswork.
--
Rob
Jul 23 '05 #7

P: n/a
Sorry I wasn't clear, but I was asking how to use your code with the
tableA to also handle all the lists on a page, including those outside
a table?

As for my old code with the "mktree", I cleaned that up as much as I
could,
assigning each new instance of the class "mktree" with a new id, but it
expands/collpases only the first one Perhaps
I can just change the collapseTree to loop thru all the ULs. I do run a
script
that generates the HTML, so it won't be much more work to have the
script
tell the collapseTree how many times to loop?

Jul 24 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.