[thelist] DHTML expanding lists

Tue Sep 3 18:08:01 CDT 2002

David:

Thanks for your help! It seems my over complicating the problem was
masking the true simplicity of what was trying to accomplish (damn
engineer coming out again). Your ideas worked great and seem to be
working well (IE 4+ on PC). I am placing it into our CMS system now so
hopefully everything will play nicely when generated from the database.

I did make a few changes but I kept true to your original idea. One
thing I did to make sure the other layers were in their "off" state was
to call your "hide" function first on the onclick command before I ran
the "flip" function to turn that layer element on. Very simple and
portable. Thanks a lot for your help!

Kind regards,
-JSLucido

-----Original Message-----
From: evolt at david.us-lot.org [mailto:evolt at david.us-lot.org]
Sent: Monday, September 02, 2002 6:01 PM
To: thelist at lists.evolt.org
Subject: Re: [thelist] DHTML expanding lists

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.
--
For unsubscribe and other options, including
the Tip Harvester and archive of thelist go to: http://lists.evolt.org
Workers of the Web, evolt !