Alvaro said:
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?
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>Collapsing 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
ointer;
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
!= n0) hideUL(o);
}
// 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.childNodes[j]);
}
}
// Not really needed, see note below
function resetMenu() {
mClick(document.getElementById("mainmenu"));
}
function initMenu(m){
var allAs=document.getElementById(m).getElementsByTagName('a');
var i = allAs.length;
while (i--) {
if (allAs.href == '#') {
allAs.onclick = function() {
mClick(this); return false;
};
}
}
}
</script>
</head>
<body onclick="initMenu('mainmenu');">
<!-- Menus start here -->
<ul id="mainmenu">
<li class="level_1"><a href="#">Menu 1</a>
<ul class="folderheader">
<li class="level_2"><a href="#">Report Types</a>
<ul class="folderheader">
<li class="level_3"><a href="#">Reports 1</a>
<ul class="folderheader">
<li class="level_4"><a href="#">Report Name</a>
<ul class="folderlist">
<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="folderlist">
<li><a href="http://www.sun.com">Add New
Record</a></li>
<li><a href="http://www.ibm.com">Edit
Records</a></li>
<li><a href="http://www.news.com">Mass
Update</a></li>
<li><a href="http://www.kontraband.com">Clone
Records</a></li>
</ul>
</li>
</ul>
</li>
<li class="level_3"><a href="#">Reports 2</a>
<ul class="folderheader">
<li class="level_4"><a href="#">Report Name</a>
<ul class="folderlist">
<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="folderlist">
<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="folderheader">
<li class="level_2"><a href="#">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" onclick="resetMenu();">Close menus</a></li>
</ul>
<!-- Hide menus -->
<!--
If not intending to reset menus when link clicked
put the reset code here and get rid of resetMenu()
-->
<script type="text/javascript">
resetMenu();
</script>
<!-- Menus end here, put content below -->
</body>
</html>