[thelist] DHTML expanding lists
evolt at david.us-lot.org
evolt at david.us-lot.org
Mon Sep 2 17:58:01 CDT 2002
On Mon, Sep 02, 2002 at 05:01:36PM -0500, Jeff Lucido wrote:
> Evolters:
>
> I have been banging my head around here for a few days working on what I
> thought was a simple implementation of an expanding DHTML listing.
> Specifically, the project I am working on requires a listing of data
> with one level of data underneath. For example:
>
> LINK 1
> LINK 2
> LINK 3
> link 3.1
> link 3.2
> link 3.3
> LINK 4
> link 4.1
> link 4.2
> link 4.3
> LINK5
> LINK 6
http://david.us-lot.org/dir.php?dir=/www-concepts/collapse
> The tricky part is this listing of data is contained within a table and
> varies in vertical position based on the information needed for the page
> (i.e. the number of elements above link 3 will vary from page to page).
> Secondly, links 1,2,5,6 are not part of the expanding list, rather they
> are regular links to other pages. So, basically if the visitor clicks on
> link 3 the below main links (4,5,6) would move down accordingly based on
> the amount of links contained under link 3, with the same being true for
> link 4. The visitor would then see the exposed sub-links of 3.1,3.2,3.3.
> I have tried several scripts form a few places (DHTMLCentral,
> DynamicDrive, etc.) but they are all called using absolute positions and
> require the setting of a container height for the possible amount of
> space needed to display the items.
>
> I hope I am making some sense here. All I really need it to do is when a
> visitor clicks on a link which contains sub-links the main links below
> it move down to accommodate the listing of sub-links. Also, when a
> visitor "opens" a link (in the case number 3) and then opens another
> link containing sub-links (in the case link 4) then the previously
> opened one closes and the newly requested one opens. Nothing too hard,
> right? Also, I do not care about persistence across clicks so when the
> visitor returns to the page the proper link is still "open."
>
> If any kind soul out there has run into this and can lend some support
> in any form I would be greatly appreciative.
Some starting code follows, unfortunatly it doesn't collapse a open
sections when another section is opened. I considered the possibility,
but realised that I would have to make various checks so that an
ancestor of the section being opened wasn't hidden. You might be able
to use this as a starting point though. (Obviously you can replace the
<H?> tags with <span>s).
flip.js:
function flip(e) {
if (document.getElementById(e).style.display == 'none') {
document.getElementById(e).style.display = 'block';
} else {
document.getElementById(e).style.display = 'none';
}
}
function hideall() {
var Nodes = document.getElementsByTagName('ol')
var max = Nodes.length
for(var i = 0;i < max;i++) {
var nodeObj = Nodes.item(i)
nodeObj.style.display = 'none';
}
}
html:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title> Collapsing Lists </title>
<meta name="author" content="David Dorward" />
<!-- Links to various related resources -->
<link rel="authors" title="David Dorward" href="http://david.us-lot.org/" />
<script src="flip.js" type="text/javascript"></script>
</head>
<body onload="hideall();">
<h1> Collapsing Lists </h1>
<h2 onclick="flip('list1')">List</h2>
<ol id="list1">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li><h2 onclick="flip('list1a');">Item</h2>
<ol id="list1a">
<li>Item</li>
<li><h3 onclick="flip('list1ai')">Item</h3>
<ol id="list1ai">
<li>Item</li>
<li>Item</li>
</ol>
</li>
<li>Item</li>
</ol>
</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
<h2 onclick="flip('list2')">List</h2>
<ol id="list2">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</body>
</html>
--
David Dorward http://david.us-lot.org/
HTML email is a bit like using coloured paper and glitter ink on a CV.
More information about the thelist
mailing list