Comments on: Javascript animated collapsible panels without any frameworks

By: rjcuk

rjcuk — Sat, 05 Mar 2011 15:26:17 +0000

Exactly what I was looking for, thanks a million

By: iThom

iThom — Sat, 19 Feb 2011 10:52:58 +0000

Thanks!
I’ve used it in my mobile version of school timetable on http://statusowo.net/ithom/Plan/iphone.html
But the first panels aren’t expanding smooth.

By: Deven Chism

Deven Chism — Wed, 09 Feb 2011 16:31:08 +0000

Hi there,

Does anyone have any suggestions for coding PHP animated collapse? I’m using Wordpress for the first time and I find myself completely incapable of figuring this out on my own. Any help or guidance would be appreciated.

Thanks!

By: Wiethoofd

Wiethoofd — Thu, 06 Jan 2011 22:16:34 +0000

A friend of mine got it working using 3 regular expresion functions picked from http://www.openjs.com/scripts/dom/class_manipulation.php to keep the script working even when you have multiple classes in the ‘panel’ or ‘panelclosed’ div class.

Add the following functions:
function hasClass(ele,cls){return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));} function addClass(ele,cls){if(!this.hasClass(ele,cls))ele.className+=' '+cls;} function removeClass(ele,cls){if(hasClass(ele,cls)){var reg=new RegExp('(\\s|^)'+cls+'(\\s|$)');ele.className=ele.className.replace(reg,' ');}}
Replace line 22 with:
if (!hasClass(el.parentNode, PANEL_NORMAL_CLASS) && !hasClass(el.parentNode, PANEL_COLLAPSED_CLASS))
Replace line 43 with:
var collapsed = hasClass(target, PANEL_COLLAPSED_CLASS);
Replace line 61 with:
if(hasClass(elements[i], PANEL_CONTENT_CLASS))
Replace lines 102 with:
// set class for the panel removeClass(panelContent.parentNode, !(direction < 0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS); addClass(panelContent.parentNode, (direction < 0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS);

By: Wiethoofd

Wiethoofd — Wed, 05 Jan 2011 12:53:16 +0000

I just found out your collapse JS doesn’t fully work when you have another classname in the ‘panel’ or ‘panelcollapsed’ div.

You will then have to add the extra class(es) in the PANEL_NORMAL_CLASS and _COLLAPSED_ in the javascript which is quite anoying when you have various div classes with the panel or panelcollapsed class in them.

By: dmdsoft.com

dmdsoft.com — Thu, 14 Oct 2010 01:51:07 +0000

Thank you so much,
It’s very useful,
but i have some problem..
it’s how to resize it..
Thanks.

By: custy1234

custy1234 — Thu, 08 Jul 2010 21:36:00 +0000

Hey there! thanks for this awesome script. I have installed it on my website without any problems I was just wondering if it was possible to make the script so that it dosent remember the opened panels when the user revisits the page. I want to remove the whole “cookies” and “remembering” part of the script so when a user revisits or reloads the page, the panels would be collapsed. I am only asking this since I am using this awesome script as a FAQ page. Thanks for your awesome script!

By: Armand Niculescu

Armand Niculescu — Fri, 21 May 2010 08:34:28 +0000

Bert, I modified the code and added Expand All / Collapse All. Just download the zip file again. If you already integrated the javascript in your project, just do a diff to see what's new or add the code else panelsStatus[name] = (el.parentNode.className == PANEL_NORMAL_CLASS) ? "true" : "false"; at line 35 and the two new functions expandAll() and collapseAll() - they're are in the downloadable archive but not in the example code above.

By: Bert

Bert — Thu, 20 May 2010 21:39:58 +0000

Armand thanks for the simple plug and play. I may have missed this but bare with me.
I have a page with around 10 collapsible panels I would like to add an “Expand All” “Close All” link, button or img
so my users can do this with ease.
I have even considered, as you may have seen, “Close all but this” but that may be a little more work than time will allow.

Any thoughts?

Thanks again,
Bert Hood

By: ProDesignTools

ProDesignTools — Sun, 02 May 2010 15:32:38 +0000

This is really fantastic, by far the best we found – thank you so much!

You can see it in live production here, it works really well:
http://prodesigntools.com/products/adobe-cs5-system-requirements.html

The only (small) addition we made was to change the mouse cursor when hovering over the header to enhance clickability, a la:

.panel h2:hover, .panelcollapsed h2:hover
{
background-color: #A9BCEF;
cursor:pointer;
}

(The new addition to the code is the last line, “cursor:pointer;”)