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

Script to collapse a list

P: n/a
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?
--
-- Álvaro G. Vicario - Burgos, Spain
-- Don't e-mail me your questions, post them to the group
--
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Alvaro G Vicario wrote:
I need a script to expand and collapse items so only one sublist is
visible at a time.


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/

--
Matt Kruse
http://www.JavascriptToolbox.com
Jul 23 '05 #2

P: n/a
Alvaro G Vicario wrote:
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: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.childNodes[j]);
}
}

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

function initMenu(m){
var allAs=document.getElementById(m).getElementsByTagN ame('a');
var i = allAs.length;
while (i--) {
if (allAs[i].href == '#') {
allAs[i].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>

--
Fred
Jul 23 '05 #3

P: n/a
In article <7f****************************@40tude.net>,
al******************@telecomputeronline.com enlightened us with...
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.


Will this do?

<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function showHide(id)
{
if (document.getElementById)
{
if (document.getElementById(id).style.visibility == "visible"
|| document.getElementById(id).style.visibility == "")
{
// hide it
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.display = "none";
}
else
{
// show it
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.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="showHide('tier1')";>one</a></li>
<ul id="tier1">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<li><a onClick="showHide('tier2')";>two</a></li>
<ul id="tier2">
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
<li><a onClick="showHide('tier3')";>three</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

Jul 23 '05 #4

P: n/a
*** Matt Kruse wrote/escribió (Tue, 15 Mar 2005 07:06:54 -0600):
Alvaro G Vicario wrote:
I need a script to expand and collapse items so only one sublist is
visible at a time.


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/


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
--
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.