473,289 Members | 1,840 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,289 software developers and data experts.

expand and collapse all

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
7 17184
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Bill | last post by:
How do you prevent the "expand"/"collapse" characters in a resulting XML output file?
1
by: James Hurrell | last post by:
Hi, I'm using the following javascript function to expand and collapse portions of text in a web page (targeted at IE5.5 and above): function doExpand(paraNum,arrowNum) { if...
1
by: Randy Starkey | last post by:
Hi, Is there a way to expand and collapse all if I have multiple implementations of this script on a single page? The script works well individually. Thanks! --Randy Starkey ---
2
by: Jenny | last post by:
My codebehind file contains a lot of sub's. Is there a fast way to expand and collapse them in the VisualStudio? It's really exhausting to collapse them all after opening the project in the...
4
by: Gönen EREN | last post by:
how can i collapse or expand a node of treeview control programmaticly? thanks.
0
by: Shadow Lynx | last post by:
When using ASP.NET 2.0's built-in TreeView on a page with <BASE target = "AnythingBut_Self"></BASE> in the HEAD, the expand/collapse buttons fail to function. The reason for this is that the...
2
by: sam | last post by:
Hi all, I have a series of divs in 2 blocks say BLOCK1 and BLOCK2 and I want to use one click to expand/collapse all those in each block. But the code I came up with exapands all the divs in the...
0
by: jim | last post by:
Hi, I have a TreeView control that sits on the MasterPage. All of my other webpages inherit from that Master Page. The Treeview receives it's data using an XMLDataSource that has it's DataFile...
4
by: Rabel | last post by:
I am not very good at javascript I mostly am a flash developer but I am trying to apply one of our old expanding menus to work for a new site but it doesn't collapse the way I need it to right now...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.