Comments on: Javascript animated collapsible panels without any frameworks

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;”)

By: javascript trick

javascript trick — Sun, 04 Apr 2010 18:32:04 +0000

[...] funnyordie.com displays only a login form after entering this javascript url in the address bar. …Javascript animated collapsible panels without any frameworksIf you need to make collapsible panels that remember their state, but don't want to use any [...]

By: Martin Arnold

Martin Arnold — Mon, 15 Mar 2010 19:48:58 +0000

Armand … great app!
However, when using it in IE7, the first panel in a series shows a large (700px?) gap between the introductory content

and the

panel.
my HTML:

…

the gap only appears in the first panel; the subsequent panels are perfect. The panel content is identical for all the panels in my mockup and works fine on IE8 and Firefox. I haven’t checked older versions of IE …

By: Tom McAdams

Tom McAdams — Wed, 10 Feb 2010 23:41:21 +0000

I love the comment above that states ‘Brilliant’. Excellent tutorial, and very condensed code. I have been using jquery for years. Its time for a change. I had the same problem(image not clickable) as Shaun with IE6, and found a workaround for it, but I no longer have IE6, so I can not test it with your code. Again, excellent code!! There are a lot of collapsible codes out there, but your formatting (how it looks to the visitor) is what I think is the most important, and yours is very clean, yet professional in appearance.

By: designer

designer — Fri, 29 Jan 2010 21:15:38 +0000

I’m curious how you would get an “active” h2 tag.
Basically, when the user expands a panel, I want the h2 tag to remain “highlighted/active”. Could use the same CSS as the h2:hover class, but not sure how to alter the javascript to append an “active” style when expanded.

By: Armand Niculescu

Armand Niculescu — Fri, 22 Jan 2010 07:21:44 +0000

1. yes, you can put anything inside a panel, just style it with CSS
2. in my example, the cookie is updated on clicking the panel title, the links inside don’t matter.
3. yes, it should work if you remove references to loadSettings(), saveSettings() and the code at lie 30 in the original example:
if (panelsStatus[name] == “false”)
el.parentNode.className = PANEL_COLLAPSED_CLASS;
else
if (panelsStatus[name] == “true”)
el.parentNode.className = PANEL_NORMAL_CLASS;

NOTE: I wrote the article in an attempt to help people learn how javascript animation is done; it was not intended a complete, plug-and-play ‘product’.

By: Jesse W

Jesse W — Thu, 21 Jan 2010 19:29:42 +0000

Armand – Great tutorial! Mad Props.
I am trying to implement this on a navigation menu. I have modified the HTML & CSS to add links and style. I have 3 panel divs. For all practical purposes one panel now looks like:

Projects

link1

link2

link3

Here is the issue (I think… I am not an experienced programmer):
With no cookie (fresh cache as well), all panels are collapsed (as they should be). After opening the panel “Projects” and clicking on “link1,” the next page loads, however all the panels are open.
Basically I think functionality relating to the Cookie that is created is not working properly (either not being saved properly, or the cookie is not being applied properly with a new page load)
Questions:
1.) Is it o.k. to have a H2 within a “panelcontent” div? (or should I use ‘p’ tags, like the original HTML?)
2.) Are the links in the “panelcontent” div sending users away from the page before the cookie can be updated? (could this be fixed by adding a delay to the link somehow?)
3.) Is there an easy way to modify the JavaScript to skip “everything cookie?” (i.e. have JS not make, save, or use this cookie. Instead each panel starts with the class specified in the HTML document.)
Thanks again for this great tutorial!

By: shaun

shaun — Thu, 10 Dec 2009 00:06:21 +0000

Hi Armand
I think your Solution for javascript/css panels is BRILLIANT !
I have implemented this myself(i am not a programmer nor developer) and I managed to alter the css to get the look and feel I wanted.
One question though…it works Brilliantly in Firefox(of course) IE 7 & 8 but when I open it in IE6 it doesnt work properly. You have to click the text for the panel to open. When you click the arrow it does not open.
A small thing I know but is there a way to reslove this as some people still use IE6 (i dont know why though)
Also, Thank you very much for putting this script out there for us to enjoy !