[thelist] collapsible elements without using IDs

[Christian Heilmann]

Matt Warden wrote:

>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.
>
>  
>
That approach is Ok, and DOM does list all DIVs, regardless of where 
they are.

The only thing that is not OK is to collapse elements via CSS only, for 
the mere reason that users might  not have javascript enabled and will 
thus be never able to  expand those.

I  seem to remember your example being rather complex, if you could tell 
me exactly what you need to  do, I could create a simple one,

Am I  right to assume that you need a script that loops through  all 
elements and checks if they have the class collapsible. Then you want to 
create a link preceeding them which expands and collapses them?