[thelist] collapsible elements without using IDs

Matt Warden mwarden at gmail.com
Fri Dec 10 08:32:13 CST 2004


I apologize if anyone gets this twice. I sent this yesterday afternoon
and according to the archives it never made it to thelist. (Also, it
looks like there haven't been any mails added to the archives since
last night???)

On Tue, 07 Dec 2004 00:52:57 +0000, Christian Heilmann > What you can
do is to add this function onclick to each A element inside
> one with an ID by looping through its document.getElementByTagName('a')
> array then your function should apply the above functionality to the
> next sibling. An example would be the demo page of the cssjs function:
>
> http://www.onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html
>

Christian,

Thanks for the link and suggestion. I have looked at the site and read
up on how exactly to separate CSS and JS. I think I have a solution
that correctly separates the CSS and JS and XHTML. You can see it
here:

http://mwarden.f2o.org/sandbox/collapsible_elements.htm

If you (or anyone else) have a chance, could you take a look at this
and see if this is kind of what you were talking about?

I do have one concern: I have to somehow "tag" divs on the page that I
want to make collapsible. I am currently doing this by using a
nonsense class called "collapsible" (or "expandable", depending on how
I want the initial state). This would be written in the PHP script if
I want that particular div to be collapsible/expandable. Then the
javascript goes through and operates on divs if the className is equal
to either "collapsible" or "exapandable." Is this appropriate? And, if
not, how else do you suggest I do it?

Also, I originally thought that getElementsByTagName() would return
only the first level of elements that matched that tag name. But, it
appears to return all elements in the DOM of that tag name, regardless
of where they are in the tree. Is this correct? And, if so, I would
then only need to id the div with the "global" index rather than what
I am doing now. i.e.:

I could do:
var oelement = document.getElementsByTagName('div')[idx];

rather than:

var oelement = document.getElementsByTagName('div')[pdividx].getElementsByTagName('div')[cdividx];

I want to do what is "right" here, rather than just relying on what
works in my browser.

Thanks all,




--
Matt Warden
Miami University
Oxford, OH
http://mattwarden.com

This email proudly and graciously contributes to entropy.


More information about the thelist mailing list