domCollapse updated – easier accessible and a tad cleaner
Update: If you are looking for an even cleaner and animated version of this script “check out YUIDomCollapse”:http://onlinetools.org/tools/yuidomcollapse/.
I updated domCollapse, the script explained ages ago in the evolt.org article “Collapsible Elements with DOM“.
It is cleaner now and generates images with links to indicate that the header is clickable rather than just relying on CSS to indicate. Thank to Stephane for reminding me that screen readers are not text browsers ;-)
Update to Version 2.1 on 06.05.2005:
Due to the overwhelming demand (2 people wanted it), I now added an option to only show one element at a time or multiple ones.
Update to Version 2.3 on 22.05.2005:
You can now define via a parameter on the function call to automatically only allow one expanded element, or not to offer the option at all.
New Version 3.0 on 6th of December 2005
Now the whole script uses the object literal and proper DOM2 event handling. And yes, Safari is supported!
May 6th, 2005 at 6:23 am
Excellent Job on this. Very easy to use. It would be nice if it had a command to set that would have it collapse all other elements when one is opened. Sometimes that can come in handy. Like with what I’m working on now. :D
May 14th, 2005 at 1:54 pm
Nicely done! I appreciate how easy it is to use the script. Nice clean code too. Good for learning more about how to manipulate the DOM.
Has anyone discovered a way to retain the state if the user clicks the back and forward buttons? Ideally an expanded section would remain expanded when clicking back, instead of returning to the original state. It seems like browsers should remember the altered state of the document and not just the original state. But, since browsers don’t work this way, is there some clever hack to make this work?
Edit
The easiest way to implement that would be via a cookie. However, that will still not work with a back, as not all browsers do reload the page. JavaScript is dealing with the current state of the document, any reload will take your state away, nothing to be done about it…
May 16th, 2005 at 9:09 am
I recently found the old version which was nice….but this new version is simply awesome!!
Plugged it into a .NET datalist and had it working in 5 minutes!
May 18th, 2005 at 7:34 pm
Chris,
Very well done ;). I only have one question. Say I use element id domcollapseall, on all triggers, thus closing all other open triggers when I click on one and I want to have the text links to expand | collapse all but not the dynamic expand/collapse link as this does not work when triggers have the id (they will always collapse others). How do I hide it without hurting the script.
May 19th, 2005 at 11:36 pm
very cool script.
What determines the size of the minus/plus image? How can a larger/smaller image be used?
Edit
The size of the image is its size, you can resize or limit it via CSS though.
May 23rd, 2005 at 4:48 pm
Great script. Thanks!
Is there a way to remove the images?
I used CSS styles to display the minus/plus images (as left aligned backgrounds, and added a left padding). And now i need to stop the script from generating the IMG tags.
Edit
The older version of the script did exactly that. I changed it to generate the images to keep it accessible for screen readers. Screen readers do collapse the elements but don’t tell the user that they can expand them again. Therefore they need a real link to collapse/expand the section. If you don’t want to see the picture, you can simply hide the link via CSS.
May 23rd, 2005 at 5:26 pm
Great script, thanks :)
A suggestion would be to use CSS backgrounds instead of inserting images, you can ise padding to prevent the text from overlapping the images.
There seems to be a bug with IE if you use bigger images with your script.
Edit See other comment.
May 25th, 2005 at 12:35 am
Seems to be a bug with Safari 1.3. Looking at your page, I can get the “Hot to install domCollapse” to expand/contract every time…However, “How to use…” will never expand by clicking it…only when using “expand all”. “Terms of use” is hit and miss…sometimes it works, other times it won’t. “What is domCollapse” starts out as expanded,but if I close it, I can’t re-open it…unless I either reload the page, or use “exapand all”.
On my test page: http://www.sanjuan.edu/services/counseling/whitehouse/resources/
I can’t get ANYTHING to open…not even using expand all…
Any ideas? I’m using the older version on another portion of the site, and it works great with Safari…So, I may just stick with that. The new version sure is easier, though…
Edit I don’t have a Mac, so I cannot test and fix it. Any Mac helper?
May 25th, 2005 at 7:41 pm
I don’t know enough about the DOM (yet) to offer any real help. I was able to find these resources, so perhaps someone with more DOM knowledge could find where the problem lies:
http://kusor.net/test/safari/index.safari.html
http://www.quirksmode.org/dom/contents.html
http://developer.apple.com/internet/safari/faq.html
May 26th, 2005 at 1:48 am
I found a temporary workaround to the Safari issue…while it’s not as good as actually figuring out what is causing Safari to break and fixing it, it does allow the script to work on everything I tested other than Safari, and give Safari all the content expanded…
Here’s the solution:
Change the line that detects for DOM compatibility to this:
if(!document.getElementById || !document.createTextNode || ( document.childNodes && !document.all && !navigator.taintEnabled && !accentColorName) ){return;}
This has been tested in FireFox 1.0.4 (Win/OSX), FireFox 1.0.3 (Knoppix), Mozilla 1.6 (Win), IE6, IE5.2(OSX), Konqueror 3.3.2(Knoppix) – it works as expected in all of these browsers.
In Safari 1.3 (OSX), the domcollapse returns without executing, so it acts as if javascript is not enabled (as expected…)
May 26th, 2005 at 6:44 pm
I am a total newbie. I love how thi sworks but I am afraid I have no clue. I did as instructed, but I do not understnad this part and why it is needed.
.elementnormal{
position:static;
left:0;
}
.elementcollapsed{
position:absolute;
left:-999em;
top:0;
height:1px;
}
#domcollapseall ul{
margin:0;
padding:0;
}
#domcollapseall li{
display:inline;
padding-right:1em;
}
without it the code breaks.. but at the top left I have text that should not be thre.. I have played with the values but I can not get rid of it unless I choose expand all.. can you help me? Is there a goo dneginner book or website. I really love what this does and want to learn. Thanks
Maddie
Edit: Well, these are the CSS classes that show and hide the elements and make the links to collapse and expand all appear in one line. The former is based on technique by Mike Rundle and the latter is explained in detail at < a href=”http://css.maxdesign.com.au/listutorial/horizontal_introduction.htm”>listutorial.
May 28th, 2005 at 3:24 pm
The Expand Collapse does not function under MAC’s IE,
any tips to get it working there
Edit: It simply applies the classes to the elements. Any CSS that works in Mac IE works with this script. As I have no access to Mac IE, I cannot test it there.
June 10th, 2005 at 5:45 pm
Thanks for DOMCollapse! What a great way to clean up content on my website! I have a few questions, though, if you don’t mind.
Question: Is there a way to set the default to “allow only one collapsed element”?
Question2: Is there a way to get the text “expand” and “collapse” to appear next to the arrow?
Question3: Sometimes the arrow has a highlight around it (like a hyperlink highlight). Some arrows do and some don’t. Is there a way to get rid of this?
June 10th, 2005 at 6:26 pm
Sorry to bug you with another question.
By the way, I figured out that if I comment out line 3 and un-comment line 5, changing domcollapse(); to domcollapse(‘makeunique’);, it makes “allow only one expanded element” the default.
But, now I have a problem with one of my pages that only happens in Firefox. All of my other DOMCollapse pages work great, in all browsers I’ve tested. Just this one, though, has a problem.
The problem is that if I collapse all the elements manually, then I lose all collapse/expand functionality.
Could it be because one element is class=”trigger” and one is class=”triggerexpanded”? Could it be because one has a table and an image inside the
I don’t know.
Any ideas?
Still, you have a great tool here. Thank you for providing it for all of us.
Ariel
arieldoucette at netscape dot net
June 22nd, 2005 at 11:46 am
First, thx a lot for this nice tool.
However, we got problem in using this.
I created a ASP page (with collapsed element) that
1. users can run when WinSock proxy are using (ie’s one is unchecked)
2. users can’t run when WinSock proxy are using (ie’s one is checked)
3. users can’t run when WinSock proxy are not using (ie’s one is checked)
4. users can’t run when WinSock proxy are not using (ie’s one is unchecked)
Any idea on this issue?
Thx
June 22nd, 2005 at 4:14 pm
Is there a way to support anchors within the collaspable sections?
For instance, if I have a glossary where the terms and definitions aare collapsed under the glossary heading, anchors to the definitions are not recognized…or at least do not open the node and display the definition.
Thanks! A nice script!
Edit You got a url where I can see what you mean?
June 27th, 2005 at 4:20 pm
Regarding anchors in the collapsable content sections… I have created a dummy page at http://www.richinsonline.com/domtest/dom_anchors.htm.
My desire is to be able to link to the DSL definition anchor (#dsl) and have the definition paragraph open up so I can link directly to it without the user having to expand all or expand the individual nodes. Thank you for any help.
July 5th, 2005 at 10:16 pm
Has anyone figured out the unwanted border around the arrows? I don’t know where it’s coming from. Any suggestions?
Edit
The scrip generates links with images in them. If you define li a img{border:none;} in your CSS, the borders vanish. Simply check the demo page how it is done.
July 7th, 2005 at 7:59 pm
works…sort of.
but I get:
“Expand Section: null” appearing before the topic
here is my code:
ONEany helpth is appreciated
July 20th, 2005 at 3:56 pm
fantastic scripting!
just a quick one… is is possible to hack the script to enable the triggers to perform both the expansion, and normal href functionality? ie. be a link as well?
July 26th, 2005 at 4:41 am
I find that when there are two tables or more they are not properly being hidden/expanded. See code below
xmlns:cbo>< ?IMPORT NAMESPACE=”dtp” IMPLEMENTATION=”../../lib/htc/dtpicker/dtpControl.htc”>
< ?IMPORT NAMESPACE=”cbo” IMPLEMENTATION=”../../lib/htc/combobox/combobox.htc”>
Action 1 for Kenneth Peoples Due on 31/07/2005 Define HPU control/shutdown requirements (for SIS cause and effect functionality)…
e>
</></>
July 26th, 2005 at 5:05 am
Great Utility,
I am however experiencing problems when I use width=”100%” on a table element.
July 31st, 2005 at 7:25 pm
Having a problem with IE/Windows. Here’s my test page: http://zamphotography.com/photos/test/pages/Zoe050626-023.html – All works fine in Firefox/Windows however, with IE6/Windows, the Paypal “Add to Cart” buttons are still visable (and in the wrong position). As soon as I hover over the trigger, they disappear. Any ideas?
August 9th, 2005 at 3:32 pm
Great Stuff
I used the DIV to group a section of elements, but couldn’t use them within tables. Unfortunately I am stuck with tables. I tried creating a table (within a table) to group all the items that I want to expand or collapse as one.
It would be massively helpful to know if you thing I can use this technology either as is, or by changing the js myself. Or if I should look in another direction.
Thanks!
-Mike
August 9th, 2005 at 10:32 pm
Answer to 24
(my own question)
Put the trigger in an element that immediately follows the
August 17th, 2005 at 3:47 pm
Has anyone tried using PHP to generate the content for the collapsible section yet? Mine got messed up pretty bad… it works perfectly with normal text, but as long as the content is grabbed from the database and is quite long, the whole thing breaks… anyone knows why? You can see what I mean here. The part where “Minnesota Counties” content is grabbed from the database.
Edit
How you generate is irrellevant, what you generate isn’t. Check the code generated. You don’t create a list but links with linebreaks. Therefore domcollapse cannot find a nextSibling element to collapse and has these issues. Just generate a list like you do for the others and all is fine.
August 22nd, 2005 at 9:41 pm
This is REALLY great! Thank you! 3 questions.
(1) Is there a way that I can use multiple versions of it on one page? For example, one in a nav bar, the other in a FAQ. It would probably need to handle 2 different look and feels for the expand/ecollapse entries and 2 different Collpase/Expand All functions … based on the DIV ID.
(2) Like Ty, I’d like to be able to embed a Named Anchor within a “hidden” element. Then when someone clicks a link that goes to that named element, I’d like it to automatically expand (see the bottom for an example).
(3) Currently, when I hover over the arrow, the “hand” appears. I’d like to be able to hover anywhere on the line and have it appear as an indication that the whole line is clicakble. Would I do that through CSS? Or would I need to modify the JavaScript?
Example of Named Anchor:
Jump to contest
…. Lots of stuff …
Contests – Explain all this stuff about contests.
details … I’d like the visitor to see this when they click the “Jump to Contest” link
Thanks for a REALLY Great tool !!!
August 28th, 2005 at 5:09 pm
I’ve noticed that with Firefox and Camino, about half the time I load a page, all of the text is visible (none of it is hidden). None of the expand / collapse links work when this happens – the arrow position changes but the text always remains visible.
However, if I refresh the page, something “catches” and the script works properly. Sometimes I have to refresh the page a few times for it to “catch.” Any ideas on how to fix this?
I tried inserting a script that refreshes the page one time when loaded, but I have to put an onLoad command in the
, and this completely breaks the expand collapse script.Thanks
September 21st, 2005 at 4:27 pm
Is there a length limitation to the content you collapse?
I’m noticing that if the length of the content is too big then the content is partially displayed at the top left portion of the web page. When the item is expanded the text is removed. I’m assuming this has to do with how the content is “hide” in the upper left corner. I played around with the values in elementcollapsed, but I think I max out it’s potential. So, I’d like to know if there’s a hard limitation so that I can truncate the content.
Thanks.
October 14th, 2005 at 11:35 am
Hi, first off thanks for this great script, it looks and behaves brilliant(ly).
I was also having the issue with the 100% width, so instead of moving the hidden content off the side I use display: none;
October 14th, 2005 at 12:06 pm
to overcome the problem with widths of 100%, use display:none to hide the content
October 21st, 2005 at 12:36 pm
in the css “cursor: hand” ought to be “cursor: pointer”
‘hand’ is IE only
November 3rd, 2005 at 12:32 pm
If the border on the plus/minus images is annoying you then use.
triggers[i].setAttribute('border','0');
November 6th, 2005 at 3:17 am
I am using this great script to develop one web page. It works very well in IE, but it did not work in FireFox. Is there any known issue with FireFox regarding this script?
Here is my test page:
test page
Thanks a lot.
November 15th, 2005 at 11:18 pm
Hi there,
The script is really wonderfull but there is one thing I really want to know. Is it possible that not tje next element collaps but that the element before collaps?
I tried to find… but could not find it, maybe I have to sleep at the moment. I hope you can help me :)
The code would look like this:
domCollapse allows you to collapse and expand parts of page by activating other parts of a page…
</>
omCollapse?
November 20th, 2005 at 12:35 pm
Hi,
It is a great tool. I would like to use it to successively display information in greater detail. What I want to do is the following: 1. Initially display h1 elements. 2. When an h1 element is expanded, show the text following the h1 trigger + h2 expandable elements. When an h2 element is expanded, show the text following the h2 trigger + h3 expandable elements and so forth. I hope I am making myself understandable, wish I could express this idea in an HTML code. Best regards Skafti
November 23rd, 2005 at 4:03 pm
This is a great script, but I am trying to give it memory. When a person expands a few things, goes to another page, and comes back to this one, I would like it to remember which ones were expanded and which ones were not. Any idea how that can be accomplished?
November 25th, 2005 at 4:37 pm
I want to move the image from before the trigger text to after the trigger text. Is that possible and how?
November 25th, 2005 at 11:09 pm
Has anybody gotten any farther with getting this to work correctly with Safari?
Clicking my triggers doesn’t show the expansion, but if I resize the Safari window even a single pixel, the expansion pops up. It’s only in Safari and works in every other browser. Any luck?
edit will try that, however that seems odd behaviour…
November 26th, 2005 at 4:09 pm
Thank you! The URL in question is http://www.jorvad.com/dw/classes.html
Right now I made the mod (shown in the comments above) to disable the script in Safari, but I’d love to be able to get it to work. Has anyone found any other scripts that funciton correctly in Safari until this one is tweaked?
Thanks again.
Edit Patience young padawan. Enjoy your weekend.
November 30th, 2005 at 4:57 pm
Good work Chris !
I’ve tried without succes to collapse/expand remotely a block whith an javascript function. Have someone an idee to do this ?
December 2nd, 2005 at 8:07 pm
Really nice script!
At the moment when you open the page – the whole page is briefly visable as expanded. Is it possible to prevent this?
December 2nd, 2005 at 8:09 pm
Now there are empty lines between as h2 is used as header.
Is there a way to remove the empty lines from the
style?
December 9th, 2005 at 4:14 pm
Can you clarify the terms of use for this script? Am I allowed to use it in commercial projects as long as it remains unaltered? Or do I need permission first? The domCollapse page seems to imply the former, while the comments in the script seem to imply the latter. Thanks!
December 9th, 2005 at 8:38 pm
I love the script. Thanks for your hard work and effore in answering questions.
I would love to use this script with a form. Instead of the arrows that show if a region is expanded or collapsed, it would be great if I could assign the trigger to radio buttons – each one makes a certain part of the form visable while hiding the others. Would this be a simple tweak?
Thanks again
December 20th, 2005 at 10:34 am
Hi,
This looks very nice, i’am new on this, is there a little sample of this?
cheers
December 30th, 2005 at 2:52 pm
Great Script.
Please have a look here: http://www.szczotka.net/
where I used this script but it doesn’t work. Any help will be rewarded :)
Regards,
Greg
January 10th, 2006 at 4:26 pm
it’s great but i don’t like the writing of the image into the parent. why not just give it a class and use bg images???
January 18th, 2006 at 2:33 am
very cool!!
but help? what is this syntax?
‘addCollapse:function(e){‘
what is going on here? i’m learning JS so it’s prob. a stupid ?
thanks, shaggy
January 23rd, 2006 at 8:24 pm
Could you please respond to the question raised earlier by Eric G? I too am confused by the apparently conflicting statements. It would help if you could urgently respond please!
“Can you clarify the terms of use for this script? Am I allowed to use it in commercial projects as long as it remains unaltered? Or do I need permission first? The domCollapse page seems to imply the former, while the comments in the script seem to imply the latter. Thanks! 12/9/2005 @ 4:14 pm”!
January 24th, 2006 at 12:29 am
It is an odd thing: I normally don’t mind scripts of mine being used, I do mind however selling them to clients. I’d also like to get informed about changes. I don’t mind changes you do for yourself, but I mind changing the script and distributing it to third parties – as that means I get bug reports about things I haven’t done.
Please contact me with an example of where you use the script and what for. I normally don’t bother charging anything, however I never mind getting a slice of pie. :- )
February 3rd, 2006 at 5:25 pm
Hi there,
Wonderful free script! One question (as always!). Is it possible to scroll the page to the bottom of the expanded div once clicked via anchors or something? I’ve some divs at the bottom of the page which once expanded require the user to scroll. If this happened automatically that’d be wonderful! Any suggestions where I can start?
February 6th, 2006 at 3:29 pm
Hi,
Frank Wrote on
12/2/2005 @ 8:09 pm:
“Now there are empty lines between as h2 is used as header. Is there a way to remove the empty lines from the style?”
I too have that problem – can you suggest a way of dealing with this?
Edit That is a CSS problem, simply set the margin and padding of the h2 to 0 and all is fine, right?
February 9th, 2006 at 3:46 am
Is there any way to get version 2.1?
February 10th, 2006 at 5:45 pm
I agree: Very cool & wonderful!
As a novice, is it possible in the DOM-script to align the open/close-icon (openPic/closePic) to right? Of course that could easy be done via css (align: 50% right), but I would like it to be done without alter the existing bakground element on some titles… Possible?
February 16th, 2006 at 6:33 am
Yes, this is very useful for something I’m working on.
I really would like to get rid of those images though. I’d really rather just not create them in the first place rather than just hiding them via CSS, unfortunately my javascript skills are lacking.
March 3rd, 2006 at 1:02 am
Hi,
Great script that works in Firefox first time.
However in IE I am getting “Errors on Page” which is stating
“error: ‘getElementByTagName(…).0′ is null or not an object
Cannot see any IE settings that could cause this, any ideas?
IE6, FF 1.7
March 3rd, 2006 at 1:09 am
@Simon: I cannot verify this, is that your own copy or somewhere else? The demo page works here like a charm in MSIE6
March 3rd, 2006 at 1:30 am
Hi
This is my own copy, developing site at moment.
I am using VS2005 to create ASP.NET 2.0 files.
I have a Master form so I placed the .JS ans CSS in there. Maybe the 2.0 CLR is generating the code differently for the IE browser which is messing with how it loads ?
Firefox works fine but needs to work in IE.
March 3rd, 2006 at 1:35 am
Highly likely, the best option would be to check the generated code (there are bookmarklets for that for MSIE) to see if it validates or check step by step where it fails. I am only using [0] at the images, so I guess that the template fails to create them, as .NET hijacks the onload handler?
March 3rd, 2006 at 2:02 am
I am still a novice so not even sure what bookmarklets are, sorry.
Tried understanding the javascript on the DOM but it is beyond me at the moment.
I enabled debug and it fails on line 74
( o.insertBefore(tl,o.firstChild); )
One thing I notice is that your plus and minus gifs have never appeared, even in FF. I copy the .JS to an includes directory and tried placing the 2 gifs there and the root directory, was not sure whether it was failing because it could not find them?
I was using my own Question Mark gif as a clickable button to toggle the “help” div below.
(Which is what I prefer, single toggle image)
It is 1am in morning here so calling it a day till tomorrow. Hope I can get it working as it is quite elegant and had enough hunting around for something to perform this task.
Thanks for help so far.
March 9th, 2006 at 5:55 am
Do not use this software until the author gets a fucking CLUE and releases it under a proper open source license.
DO NOT USE NON-FREE GARBAGE
March 9th, 2006 at 8:58 am
Mr.Clean: I will sell you a sack of my garbage for £40 each, deal?
March 10th, 2006 at 5:20 pm
i have al little question about this script.
On my website i use this piece :
Zwangerschap
The section with tpx is for making a list of a specific category.
If i use this nothing happens.
The list is still being seen on the screen and i get the text”algemeen” be clickable.
What am i doing wrong.
Roelof
March 18th, 2006 at 1:27 am
Need an EXPAND ALL, COLLAPSE ALL capability. How could that be done with this modern and very clean CSS-JS approach?
March 20th, 2006 at 7:46 pm
I am new at the CSS and JS stuff, but I love the script. I am starting to understand it, but why would I get double icons on each expandable line? Only one of them changes to the minus when clicked, but both activate the expand.
I am using the [h2 class="trigger"]
Thanks again.
March 25th, 2006 at 6:52 am
As it is with the current script, it goes through and searches for each collapsible element after the defined trigger(s).
Is it possible for a “domCollapseLITEâ€, where all you have to specify is the trigger and the collapse/expandable element(s)? Yes, you can do it with anchors and inline “onclick” Javascript but that’s just yucky ;-)!
If in future (or soon, maybe never?), could a LITE version be developed so that we’re using a very simple script and not unnecessarily using domCollapse and its attached “search for collapsible elements†function…
Thanks for your hard work put into domCollapse, it’ll suit me in the mean time, cheers :)!
April 3rd, 2006 at 7:02 pm
I’d like to make all LI inside an UL expandable, but an error is thrown in IE6…everything seems to work properly in FF (go figure!). In IE the JS doesn’t seem to see the DIV that follows each LI, which should be the part that hides/shows. For example, in a list of 3 items, the first LI will show/hide the second LI, the second LI will then show/hide the third LI, and the third LI won’t show or hide anything. It’s as if the script is looking for the next LI, not the next DIV. Any solutions?
Thanks for the great script!
Travis
April 5th, 2006 at 7:33 pm
Is there any way to shift the trigger to align right instead of left? The trigger picture is called by the js not html or CSS, and text-align: right doesn’t seem to work, so would it be easy to modify the js?
April 11th, 2006 at 3:33 am
has anyone figured out how to fix the safari bug of this script? I tried my website on a mac on the weekend and the site is simply not accessible because it doesn’t expand when you click on the categories in safari…
there is a workaround further up on this page but i don’t understand how i can implement it into the JS file.
thanks for any help
kai
April 11th, 2006 at 10:42 pm
As noted in earlier posts, safari still seems to have critical issues with ver 3. For me, the target won’t expand if the browser window/viewport is shorter than the height of the page content. In other words this problem occurs when a vertical scrollbar is present. But after hitting the target you can force an expansion by manually resizing the window by any small amount.
It would be great to have Safari supported in future versions.
April 18th, 2006 at 1:54 am
yeah, definitely! It would be great if someone could explain the workaround mentioned above. I’m not a JS coder so it would be nice if we can get a step-by-step guide for the workaround. :-) thanks heaps!
kai
April 19th, 2006 at 10:41 pm
In the instructions you should note that the CSS also needs to be linked otherwise nothing will collapse. What about importing the css automagically with javascript?
April 20th, 2006 at 11:29 pm
Great script, you saved me. Here’s my question though. I have created a list of about 40 expandable items, all is fine. I have the uniqueCollapse on where when I expand one, it closes the previously opened one, also very cool. However I have a requirement to have about 5 of the items expanded by default. While this is easily accomplished by changing the class from “trigger” to “expanded”, it also creates a problem. Since some are open by default, and the uniqueCollapse is on for a few items, it really scrwes things up. For instance if I try and close one of those open by default, it opens some random section, and if if I close that one it opens another, and so on. Quite annoying.
if I turn off uniqueCollapse all is fine. What I n eed however is:
1. Have several expanded by default
2. Only the ones expanded by default will not be affected by uniqueCollapse, all others will abide by the “only one open at a time” rule.
Asking a lot ut is this possible?
April 21st, 2006 at 1:20 pm
Hi again,
Just wantedto be sure you’d received my comment and subsequent email yesterday. I’m ready to create Dreamweaver templates but for implementing the ‘don’t show collapsed area before all is loaded’ trick you sent me.
If there’s a significant problem with combining the two, do please let me know, then I’ll create the templates without and update them later.
Best wishes
April 21st, 2006 at 8:48 pm
Wow, this functionality is exactly what I was looking for. However I need to customize it just a bit. I do not want to hide “the next following element” (javascript’s nextSibling). I need to hide the firstChild element of the nextsibling.
I am fairly new to javascript, and I just can’t seem to modify the script to get it to work. I really do not want to alter my markup structure, as it is working very nicley for other design purposes.
here is the structure of my markup…
TODAY’S NEWS
Welcome to XYZ
I can not “hide” the entire class=”contentbox_body” element (for deisgn purposes), so I have put in an empty div section that could act as a container for all of my content in the content box. If I hide that div manually it looks perfect, I just can not seem to modify the script correctly to do this for me.
Any help would be greatly appreciated.
Great work on a very useful script.
April 22nd, 2006 at 3:32 am
sorry, doesn’t anyone care that this script is not working in safari and makes the content inacccessible for basically all mac users?
Please advise a work around! thanks!
Edit: I heard about people using Firefox on a Mac, too, it might be just a myth though. Also, please realise that it only doesn’t work when the window size is too small, and I asked for help how that can be solved as it is a browser rendering issue and has nothing to do with my script. So “making the content inaccessible for basically all mac users” is a bit strong, as I am a Mac user aswell…
April 22nd, 2006 at 8:24 am
@All Safari Users
I have no idea why that happens on really small windows, and I am happy for you to help me fix it, as I am only on a Mac in my freetime.
@Phil:
h2{
position:relative;
}
h2 img{
position:absolute;
right:.2em;
top:.2em;
}
@bblack: Change the last line in makeTrigger:
var tl=dc.tempLink.cloneNode(true);
var tohide=o.nextSibling;
while(tohide.nodeType!=1)
{
tohide=tohide.nextSibling;
}
o.tohide=tohide;
to:
o.tohide=tohide.firstChild
Make sure there is no whitespace between the element and the first child element, else you need to add another while loop.
@Miguel: I don’t get it? Are you on MSIE/Mac or Netscape 4.x? Otherwise @import should include the CSS…
@Jamie: That is quite a change, I cannot promise to alter that, as my book deadline is looming.
@Dylan: The images are there for a reason, as they make domcollapse accessible for keyboard users. It is your prerogative to alienate those, but I don’t swing that way.
If you want to remove them you can use CSS or comment out every line in the JavaScript that has a (‘img’) in it, which are 42,59,60,64,65,90,91,100,101,107 and 108.
April 25th, 2006 at 12:43 am
Awesome feature. I also notice no expansion in Safari but I’m going to go ahead and use this in hopes that this might be amended in the future.
Thanks to Chris
April 28th, 2006 at 3:13 pm
Very minor bug in index.html.
Line 8 should be this:
@import “ottools.css”;
Not this:
@import “../../ottools.css”;
May 1st, 2006 at 4:35 am
hi!
I am new to this… I wonder where all the contents of the domcollaspe.zip file (after unzipping them) should go with respect to server folder. I am using MT blogging on a friend’s server and I am not sure where the files should be placed; e.g. “/assets/mt-static/js” or?
Could you advise?
Thanks for the time..
mayee
May 9th, 2006 at 8:26 pm
Why can’t there be more thorough examples of domCollapse. I know it rocks, but I cannot figure out how to implement it, nor can I find any information on how to implement it. The information you provide on the site does not help a user with little javascript knowledge. An example file would do good enough.
May 9th, 2006 at 8:58 pm
Sean, what about “view source” or opening the file contained in the zip in an editor?
The page itself is a demo of the script, and the using and styling sections should be pretty obvious. What part is unclear to you?
May 15th, 2006 at 12:41 am
I found the example literally 2 minutes after I made that post. I must have been blind. Sorry :-/
May 15th, 2006 at 12:50 am
So I was reading and it says 3.0 is safari compatible, however, many of my mac users are complaining that domCollapse is not working. Why won’t simple browser recognition with a new function ‘expand all’ do the trick?
I see there are some fixes above, however for the average user these instructions are very unclear. ‘Change the line that detects for DOM compatibility to this’ However I do not see any comments that refer to ‘safari detection.’ Not knowing js I cannot identify where this function lies. A line # would be awesome!
June 5th, 2006 at 10:24 pm
Maybe it is not the right place to ask it but I really searched a lot an didn’t find it anywhere… I would like to know if it is possible to trigger the DOM Collapse function using another link than the one generated by the script and is yes, how?
June 11th, 2006 at 12:10 am
To all those looking for an “expand all/collapse all” function, I think I might have a solution. I’m not a javascript expert, but this seems to work for me:
First, I added a span (could be any element though) with id=”excoll” and contents of “[expand all]” (no quotes).
Then I added the below code to the domcollapse.js file:
changeAll:function(){ temp=document.getElementsByTagName('div'); for(var i=0;i<temp .length;i++){ if (document.getElementById('excoll').innerHTML=='[expand all]' && temp[i].className=='hide') { temp[i].className=temp[i].className.replace('hide','show'); } if (document.getElementById('excoll').innerHTML=='[collapse all]' && temp[i].className=='show') { temp[i].className=temp[i].className.replace('show','hide'); } } if (document.getElementById('excoll').innerHTML=='[expand all]') { document.getElementById('excoll').innerHTML='[collapse all]'; } else if (document.getElementById('excoll').innerHTML=='[collapse all]') { document.getElementById('excoll').innerHTML='[expand all]'; } }Then I added an addEven call to the init function to setup the “expand all” action:
dc.addEvent(document.getElementById('excoll'),'click',dc.changeAll,false);So basically, this function checks the contents of the element with id=”excoll” to see if it says “[expand all]“, and if so, it changes all the elements with class=”hide” to class=”show”. Opposite with “[collapse all]“. Hope this makes sense.
June 22nd, 2006 at 1:29 pm
GREAT, great job!
I wonder if is possible to mark uniquecollapse as true and obtain again that a click on a trigger may open and close the section.
Now this is possible only if I have uniqueCollapse as false.
Thanks
June 22nd, 2006 at 2:16 pm
Great Job.
I’d like to be able to collapse open elements also if I set uniqueCollapse = rue;
Is this possible ?
Thanks in advance
Sergio
July 1st, 2006 at 8:45 am
The parent of a element becomes a clickable link when the menu is expanded, even if the boolean to make the parent link collapse the section is marked: linkParent:true,?
The sites
lists are generated dynamically, so all the- ’s have an tag. We set .pde to use the parents to collapse and expand the menus, and it works geat, until we add the strong element, then the parent that was functioning like the image, suddenly becomes a link to a deadend in our site.
Shouldn’t it still have the open image (the down triangle or minus sign) and behave as a way to collapse the menu, not suddenly become a targeted link?
Hope I’m explaining this in a way that Chris can get his brain around it.
July 3rd, 2006 at 1:48 am
Thanks, Chris – exactly what I need!
Do you have a solution for nesting expand/collapse lists? (i.e. the ability to have number 2. on the list, for example, serve as the trigger for expanding 2.1., 2.1., and 2.3. in a single block?) Thanks very much.
July 3rd, 2006 at 2:05 am
Hi Guys,
Wrt Will’s expand all/collapse all solution, I get an “object required error” on line 152:
151:addEvent: function(elm, evType, fn, useCapture){
152:if (elm.addEventListener)
when I insert his last line of code (
dc.addEvent(document.getElementById('excoll'),'click',dc.changeAll,false);into the init function.What newbie error am I making?
Thanks very much!
Gary
July 6th, 2006 at 11:27 am
Hi here _
Congrats, excellent script, very neat!
I used it to build a menu on this page, but sadly I can’t get it to work on Safari; weird thing, since it looks fine and dandy in Firefox :)
There are Cold Fusion strings embedded in the menu: Cold Fusion is here used to retrive informations from a database – could this be the problem?
I hope you can help me ;)
Regards
July 19th, 2006 at 12:32 am
Hi, for some reason the plus image is constantly there, it doesn’t dissapear when I expanded the area, how can I solve that, and also, how can I put the image aligned on the right, and the text on aligned on the left?
Thnx
July 19th, 2006 at 5:16 pm
I like this script a lot. Thanks for coding it and sharing it with the world.
I’d like to implement this on a commercial site but a couple of things make me nervous so I want to check with you.
1: On the OnlineTools site it says “domCollapse is not open source, and it is prohibited to change and resell the script.” Does that mean it’s prohibited to change the script? I’d like to make modifications, and I have no intentions of reselling this script (modified or original)
2: In the source it says “Not for commercial reselling or use, unless consent given by the author”. I’d like to use this script (modified) in a commercial web site. How do I go about getting your consent for this?
Thanks again.
July 22nd, 2006 at 12:00 am
Hey everyone,
I’ve improved the ‘expand/collapse all’ functionality a good deal since my last post. You can find the code and an example here: http://www.willmcelwain.com/design/newdomcollapse.html
Hope that helps!
-Will
July 28th, 2006 at 4:45 pm
This is great work! thanks!
I was wondering whether there are any alternative .css files allowing for different design version of this script? For instance, do you have the set that is used in your Home page (with the big blue line)? Last, if a stylesheet library was open, I’m sure many would actively contribute to it with…
Best
Thierry
July 31st, 2006 at 11:26 pm
I’ve written javascript code to expand/collapse rows in a table (often a nested table for formatting purposes) and I would like to do the same with your code… but I can’t seem to get the image to appear within the table/row/cell that I want… it gets placed ahead of the table. Do you have examples of how to use domcollapse to show/hide table rows?
Thanks.
August 21st, 2006 at 2:00 pm
Greetings,
I too would like to find a way to “remember” the state of DomCollapse via a cookie. Since I’m not a JS coder, can anyone recommend a way to accomplish this? Any ideas would be appreciated.
August 25th, 2006 at 8:00 pm
Hi. Great script. Is there a way to make just the image clickable and not the whole element? Thanks.
September 22nd, 2006 at 7:30 pm
We used your script for our festival website. It looks great, thanks!
September 27th, 2006 at 10:48 pm
It looks very interesting. It is my understanding that one cant break tables across DIVs. I have a need to create a table or at at least a table like structure where there are some columns of data but I would like to hide some of the detial but keep the vertical alignment.
Any suggestions?. Is there a way that I can specify horizonal alignment and use domcollapse?
Thanks, Frank
October 19th, 2006 at 2:54 am
After reading the posts, I’m really excited to get this working but unfortunately I can’t seem to be able to. I’m using Dreamweaver 8 and hoping someone can “lead me by the hand” so to speak. I’m much more of a design guy than a code guy and from the directions I can’t seem to decipher if I need to copy and paste all the code or if there is an easier way.
Any assistance is greatly appreciated because this script looks to be exactly what I need
December 8th, 2006 at 11:09 am
Found your Script yesterday, started playing with it today!
Really Awsome!
I tested it in IE7 and Firefox, with great, fast results.
I have one question in IE7 i get an Active X script warning. Is there a work around for this issue so that the script is not blocked or seen as possibly being maliscious.
If so would love a reply
Thanks again for a great script, which has helped me greatly reduce page length.
December 20th, 2006 at 9:23 pm
First off, the script is very useful.
I am using it in one of the forms that I put on a web-based database.
As soon as I use the script in combination with a pull-down menu (
Thank you.
December 22nd, 2006 at 6:53 am
Hi!
Thank you for this script It’s really working well for me. But I have one small problem with the borders around the images. I know you’ve mentioned how to fix this, but I can’t seem to figure it out. If you have a CSS file or something that has the image border set to none or 0 or something, or if you could please provide a link to a sample css where this is set or something, I’d appreciate it very much. I just can’t figure out how or where to set the border attribute.
Thanks!
-Karen
Edit: Karen, this is a CSS problem not part of the script. In your CSS, set a img{border:none} or check the “explanation post here”:http://wait-till-i.com/index.php?p=204
December 22nd, 2006 at 8:27 pm
Hi!
I have an ASP.Net web page (created in Visual Studio 2005) that uses DOMCollapse to collapse or expand three sections on the page:
> Add New Customer
> Add New Customer by Group
> Update Existing Customer
These are all collapsed by default.
Here’s the problem. If I expand the “Add New Customer” section to add a new customer, and I enter the new customer id into the textbox, that generates a postback and the screen redisplays. What’s supposed to happen is that the Customer’s name, city and state are retrieved from a main database and displayed to the right of the newly-entered customer number. But when the page redisplays after postback, the “Add New Customer” section is collapsed again and the information which should show after the user presses the “Enter” key, doesn’t display. I think what I need is for the page to ‘remember’ the state of the expanded and collapsed sections on postback. Is there a way to do that?
Any suggestions?
Thanks!
Karen
January 10th, 2007 at 8:51 pm
I love this code, and have figured out how to edit it to almost exactly what I need, the only thing I can’t figure out is how to change the colour of the link when I hover over it? Right now it shows purple…
Thanks a bunch!
January 19th, 2007 at 11:01 am
Great piece of code.
Is there a way to limit hover effect to just the link text width … they way CSS renders any link than the 100% default width! Does my question make sense???
February 7th, 2007 at 6:36 pm
Love the domCollapse!Love it love it! I was wondering if there was any way to print the individual sections? If not, maybe you know of some other resources you can point me to to help with this? I have limited experience with scripting, obviously. Thanks!
March 4th, 2007 at 5:27 am
Thank you for domCollapse!!! I can’t figure out how to do the expand all and collapse all. Can you give me a hint?
March 27th, 2007 at 3:10 pm
Great Job! Amazing plug-in and very easy to use.
I have a functionality where, I need to reduce the width of the DIV that controls all those that are below that. So when its expanded, say it shows 50 elements; when it is collapsed it should shrink its width. Is there a way to do that using this tool?
April 12th, 2007 at 8:54 am
Nice and simple script. I just wanted to ask if it gets a possibility to change the speed of this collapse. Like the navigation of doc.mootools.net??
April 12th, 2007 at 12:40 pm
hey chris,
have you experinced any issues with absolutly possitioned elements within a collasped element?
I am http://www.systemserp.co.uk/webjobs/ :)
is there a quick fix or do i need to junk absolutly possitioned elements?
cheers
April 14th, 2007 at 12:32 am
Nice, thanks…
I never saw a response to this question, or if I did I just miss it?
At the moment when you open the page – the whole page is briefly visable as expanded. Is it possible to prevent this?
Thanks Again.
June 14th, 2007 at 11:18 pm
I am very impressed by this script. A couple of questions and an observation.
1) What do I have to do to use this for a paying client who wants to use it on their corporate website?
2) I absolutely positively have to have the opened expanded state saved when they go off the page and return. How does one use cookies to do this?
And the observation:
Firefox 2.x retains the expanded state every time you return to the page EXCEPT the first time you return. How is this possible? I could live with that in IE …
Thanks again …
June 17th, 2007 at 11:16 pm
Hello,
Thanks for doing this script. Its great.
I was able to successfully create a list. On click it loads links below it. Is there a way for the links to stay showing once clicked?
Thanks for your help,
Patty
June 20th, 2007 at 8:14 am
Thanks a lot for this great script! Nice Job!
I need to have an addtional link (a href) in my trigger element (h2). But when clicking on the link the box collapses/expands instead of calling the link.
Is there a trick to do this?
Thanks a lot
June 22nd, 2007 at 4:42 pm
very nice – is there a way to make it modal – i.e. when you open the existing open closes?
thanks – great work!
June 26th, 2007 at 12:40 pm
I need some help,
1.In my code, hover is not been working. it suppose to change the color as mouse moves over it
2.How does i use cookies to remember the current status.
July 6th, 2007 at 6:44 pm
Are there any plans on updating DOMcollapse? Thus far it has been fantastic for building a collapsible navigation, and i’ve yet to see anything that works nearly as well for my needs.
I would like to integrate it with mootools (or scriptalicious or jquery or whatever) to get some slide effects going… but i’m really not sure how i would.
Please let me know if this thing is dead in the water.
I’m just getting in to js, and so maybe getting this basic, unobtrusive concept going with mootools would be a good (or horrible?) place for me to start…
September 15th, 2007 at 11:31 pm
i Have been looking for accissible code and easy to use like this since Ages!!! … but with your dom Collapse i’m now able to to Collapse menu without spending time and eforts
thank you very Much,
Mohammed
September 21st, 2007 at 5:17 pm
I used this in a site but now the info I like to show is caegorized in another level I like to also collapse. ie.
+ some info 1
+ some info 2
text info 2
September 21st, 2007 at 5:20 pm
I need to use this feature in a site which has another level of categorization
+ info 1
+ info 2 (opened)
text 2
text 2
+ info 2.1
+ info 2.2
+ info 3
text 3
text 3
+ info 3.1
+ info 3.2
Is this possible? My JS is very low.
September 21st, 2007 at 5:21 pm
I need to use this feature in a site which has another level of categorization
+ info 1
+ info 2 (opened)
text 2
text 2
+ info 2.1
+ info 2.2
+ info 3
text 3
text 3
+ info 3.1
+ info 3.2
Is this possible? My JS is very low.
Thanks for any advise
Othon
September 24th, 2007 at 12:22 pm
Hi,
Implemented YUIDOMCOLLAPSE - great work Chris thanks, although I found a little bug in Mozila [FF2] that did not fully expand the parent element, cutting off the last few floated list elements (in my case it seemed to be something to do with the floats within a list elements.
I found that by adding a normal fixes for ensuring the parent element wraps the contained floats in Mozila didn’t work.
overflow: hidden;width: 100%;
I tried specifying height: auto – but no joy – but for some reason adding !important after height: auto sorted it for me.
overflow: hidden;
width: 100%
height: auto !important
Hope this helps. Maybe this should be added to the code base or documentation.
December 30th, 2007 at 5:10 pm
I am hoping someone will be able to help me with this. I have implemented domcollapse on my site but am receiving some strange errors. A user can click on the header (or the plus sign – h3 element) and the plus sign will even change to a minus sign. Unfortunately, the next element (em) doesn’t get hidden. I have tried numerous implementations of the same basic concept to no avail. After a TON of time put into this … if anyone has any insight to this problem, I would be incredibly grateful.
jw
January 3rd, 2008 at 4:34 am
Can the element that collapses contain anything? Can it contain a table?
January 27th, 2008 at 9:02 am
Has anyone figured out how to move the pointer to the right of the trigger? It would be greatly appreciated.
February 12th, 2008 at 6:12 pm
This script seems to have one failing and that is I cannot get link, hover, etc. to work. I have tried various combinations of styling the trigger and expanded and even the h2 a. Does anyone know how to do this?
February 12th, 2008 at 6:23 pm
I’ve tried to implement the YUI dom collapse but it just fails to run. I have copied the example website onto my PC and the part which says “Click the following headings to get extra information and see the script in action” appears but the stored js files will just not run to change the “trigger” parts. Any advice appreciated.
February 14th, 2008 at 4:36 am
Is there a way to change the text of the trigger when it is expanded/collapsed.
Just as the image is changed from a plus to minus, I would also like the text to change as well. For example from “Show Section” when collapsed to “Hide Section” when expanded.
March 4th, 2008 at 9:43 am
the only problem that i have is that when i am using the fancy version, the clickable titles are with a space between then. i.e. there is a list of 10 expandable areas. and when none of them is opened, there is still white space between them, i can not get it to show without any space, just the titles tightly one after the other one like on the example page http://onlinetools.org/tools/yuidomcollapse/
December 5th, 2008 at 6:05 pm
Can you please tell me how to hide the image link using CSS?
Thanks
December 8th, 2008 at 8:52 pm
Hi I am able to get the script working but the images are not showing up. It is only showing the expandsection and collapsesection links instead of the images. I have double checked that the images are present. Any help? Thank you
April 21st, 2009 at 2:38 pm
For those of you who have had a problem with the border around the images, check to make sure your html page is importing the ottools.css properly. I was having the same difficulty despite ottools.css had variations of img{border:none} in various places, but I also noticed some other formatting differences.
The reason was because after downloading and moving my files into the same folder, my css import in the tag looked like this:
@import “../../ottools.css”;
/* domCollapse styles */
@import “domcollapse.css”;
Note that it was finding the domcollapse.css and not ottools.css. If you place the two css files and the js file into the same folder as the html file, then it should look like this:
@import “ottools.css”;
/* domCollapse styles */
@import “domcollapse.css”;
If that’s your issue, you’ll notice a huge change when you fix this. :-)
January 29th, 2010 at 6:52 pm
Has anyone successfully used this with NetObjects Fusion?
I’m struggling to get it to work as NOF is a little unusual. SO if you have let me know!