[thelist] DHTML expanding lists

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.