Script to collapse a list

**Matt Kruse** · Jul 23 '05, 06:27 PM

Re: Script to collapse a list

Alvaro G Vicario wrote:[color=blue]
> I need a script to expand and collapse items so only one sublist is
> visible at a time.[/color]

My tree code doesn't limit it to having one subtree open at a time, bu you
could write code to do so.

Page not found · GitHub Pages

http://www.javascripttoolbox.com/mktree/

--
Matt Kruse

JavascriptToolbox.com - Domain for sale

http://www.JavascriptToolbox.com

**Fred Oz** · Jul 23 '05, 06:27 PM

Re: Script to collapse a list

Alvaro G Vicario wrote:[color=blue]
> I have a list built on HTML and CSS:
>
> <ul>
> <li>Foo</li>
> <li>Bar
> <ul>
> <li>Gee</li>
> </ul>
> </li>
> </ul>
>
> I need a script to expand and collapse items so only one sublist is visible
> at a time. I've found several scripts for trees but they either need the
> list to be in their own format or they add tons of weird code to insert
> icons and style the list (which breaks my design). Could you recommend me a
> simple script to do so?
>
>[/color]

The following is about as simple as possible, the onclick
handler is added dynamically, so there is no script in the HTML.

If JavaScript is not enabled, the menus appear in full - i.e.
not collapsed. Lightly commented.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Collapsi ng Menu Example</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<meta name="Date" content="2005-02-15">
<meta name="Author" content="Fred Oz">
<style type="text/css">
..level_1, .level_2, .level_3, .level_4 {
cursor:pointer;
cursor:hand;
font-weight:normal;
list-style-image:url(plus. gif);
color:#003366;
padding-bottom:5px;
}

LI { padding-left:2px;}
a:visited {color: #003366;}
a:hover {color: #663333;}
a:active {color: #003366;}
a:link {color: #003366;}
..style1 {font-size: 14pt; font-weight: bold;}
body {margin-left: 15px;}
</style>

<script type="text/javascript">

// Handle menu click
function mClick(n) {

// Go up to LI or UL, whichever comes first
// Will always be LI except on load when will be UL
while (n.nodeName != 'LI' && n.nodeName != 'UL') {
n = n.parentNode;
}

// remember node
var n0 = n;

// Go up to UL if stopped at LI above
while (n.nodeName != 'UL') {
n = n.parentNode;
}

// Make children of all sibling UL's hidden
// Do not hide kids of node clicked on
// to prevent flashing off & on
var o = n.childNodes;
for (var i=0; i<o.length; ++i) {
if (0[i] != n0) hideUL(o[i]);
}

// Make children of node clicked on visible
for (var k=0; k<n0.childNodes .length; ++k) {
if (n0.childNodes[k].style) {
n0.childNodes[k].style.display= '';
}
}
}

function hideUL(x) {
// Hide UL
if (x.nodeName == 'UL') x.style.display ='none';

// Recurse down tree, hiding all ULs
for (var j=0; j<x.childNodes. length; ++j) {
hideUL(x.childN odes[j]);
}
}

// Not really needed, see note below
function resetMenu() {
mClick(document .getElementById ("mainmenu") );
}

function initMenu(m){
var allAs=document. getElementById( m).getElementsB yTagName('a');
var i = allAs.length;
while (i--) {
if (allAs[i].href == '#') {
allAs[i].onclick = function() {
mClick(this); return false;
};
}
}
}

</script>

</head>
<body onclick="initMe nu('mainmenu'); ">

<ul id="mainmenu">
<li class="level_1" ><a href="#">Menu 1</a>
<ul class="folderhe ader">
<li class="level_2" ><a href="#">Report Types</a>
<ul class="folderhe ader">
<li class="level_3" ><a href="#">Report s 1</a>
<ul class="folderhe ader">
<li class="level_4" ><a href="#">Report Name</a>
<ul class="folderli st">
<li><a href="http://www.apple.com"> Add New
Record</a></li>
<li><a href="http://www.yahoo.com"> Edit
Records</a></li>
<li><a href="http://www.google.com" >Clone
Records</a></li>
</ul>
</li>
<li class="level_4" ><a href="#">Report Name</a>
<ul class="folderli st">
<li><a href="http://www.sun.com">Ad d New
Record</a></li>
<li><a href="http://www.ibm.com">Ed it
Records</a></li>
<li><a href="http://www.news.com">M ass
Update</a></li>
<li><a href="http://www.kontraband. com">Clone
Records</a></li>
</ul>
</li>
</ul>
</li>
<li class="level_3" ><a href="#">Report s 2</a>
<ul class="folderhe ader">
<li class="level_4" ><a href="#">Report Name</a>
<ul class="folderli st">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li class="level_4" ><a href="#">Report Name</a>
<ul class="folderli st">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="level_1" ><a href="#">Menu 2</a>
<ul class="folderhe ader">
<li class="level_2" ><a href="#">Report Name</a>
<ul class="folderli st">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" onclick="resetM enu();">Close menus</a></li>
</ul>


<script type="text/javascript">
resetMenu();
</script>

</body>
</html>

--
Fred

**kaeli** · Jul 23 '05, 06:27 PM

Re: Script to collapse a list

In article <7facn10ykyyp.1 4wddnrgxeu0$.dl g@40tude.net>,
alvaro_QUITAR_R EMOVE@telecompu teronline.com enlightened us with...[color=blue]
> I have a list built on HTML and CSS:
>
> <ul>
> <li>Foo</li>
> <li>Bar
> <ul>
> <li>Gee</li>
> </ul>
> </li>
> </ul>
>
> I need a script to expand and collapse items so only one sublist is visible
> at a time.[/color]

Will this do?

<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function showHide(id)
{
if (document.getEl ementById)
{
if (document.getEl ementById(id).s tyle.visibility == "visible"
|| document.getEle mentById(id).st yle.visibility == "")
{
// hide it
document.getEle mentById(id).st yle.visibility = "hidden";
document.getEle mentById(id).st yle.display = "none";
}
else
{
// show it
document.getEle mentById(id).st yle.visibility = "visible";
document.getEle mentById(id).st yle.display = "";
}
}
}
</script>
</head>

<body>
<p>This is a test. Click on high-level LI to hide sub-LI. Click again to
show.</p>
<ul>
<li><a onClick="showHi de('tier1')";>o ne</a></li>
<ul id="tier1">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<li><a onClick="showHi de('tier2')";>t wo</a></li>
<ul id="tier2">
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
<li><a onClick="showHi de('tier3')";>t hree</a></li>
<ul id="tier3">
<li>ggg</li>
<li>hhh</li>
<li>iii</li>
</ul>
</ul>
</body>
</html>

--
--
~kaeli~
Have you forgotten about Jesus? Isn't it about time you did?

http://www.ipwebdesign.net/wildAtHeart

http://www.ipwebdesign.net/kaelisSpace

**Alvaro G Vicario** · Jul 23 '05, 06:36 PM

Re: Script to collapse a list

*** Matt Kruse wrote/escribió (Tue, 15 Mar 2005 07:06:54 -0600):[color=blue]
> Alvaro G Vicario wrote:[color=green]
>> I need a script to expand and collapse items so only one sublist is
>> visible at a time.[/color]
>
> My tree code doesn't limit it to having one subtree open at a time, bu you
> could write code to do so.
> http://www.javascripttoolbox.com/mktree/[/color]

Is there a quick way to allow image tags? My list, unfortunately, is
composed of images and if you click on them the expand/collapse action is
not triggered.

--
-- Álvaro G. Vicario - Burgos, Spain
-- Don't e-mail me your questions, post them to the group
--

Script to collapse a list

Script to collapse a list

Comment

Comment

Comment

Comment