Panel tutorial

Javascript animated collapsible panels without any frameworks

1

Javascript animated collapsible panels without any frameworks
By Armand Niculescu If you need to make collapsible panels that remember their state, but don’t want to use any javascript framework, this tutorial will help you do this with no headaches - and you’ll learn some neat javascript tricks too! In case you’re wonderingwhy no frameworks, the reason is two-fold. • First, although frameworks are nice, they’re BIG. jQuery weighs over 50Kb 1; it’s not much if you’re building an entire web app, but if you’re only looking for some specific effect, it’s overkill considering that you can achieve the same thing in less that 3Kb. • Second, by doing it yourself, you have the potential to actually learn more about javascript(only if you want to — the code I’m presenting is pretty much plug-andplay) and reuse the concepts to do other things - like a collapsible tree menu for example.

Features at a glance
• • • • • • works with any number of panels in a page; plug-and-play – can be used with little or no tweaks; shows different arrows and style for the expanded/collapsed state; animated transitions; each panel’sstate is saved and remembered between sessions; tested in IE6, IE7, IE8, Firefox 3, Chrome, Safari 4 and Opera 9.

Start with layout and style
For this tutorial we’ll use a minimal style; since the article is not about CSS, I will only briefly cover this.

HTML
The required HTML for a panel is very simple:
1. 2. One panel 1 To add insult to injury, if you are using a CMS or blog withplugins, they sometimes use different frameworks, so the page ends up loading jQuery, MooTools and Scriptaculous to display some simple effects.

©2009 RichNetApps.com

Javascript animated collapsible panels without any frameworks 3. 4. ... content goes here ... 5. 6.

2

We have a DIV that encloses the title (in our case a H2 tag, but you could use something else) and another DIV that willhold the actual content. We need this kind of nested structure, but if anyone thinks of a more semantic approach, it can be changed.

CSS
For our panel we will use two main classes, .panel (for expanded state) and
.panelcollapsed (for the collapsed state), like this:
1. .panel, .panelcollapsed 2. { 3. background: #eee; 4. margin: 5px; 5. padding: 0px 0px 5px; 6. width: 300px; 7. border: 1pxsolid #999; 8. -moz-border-radius: 4px; 9. -webkit-border-radius: 4px; 10. }

Feel free to change the layout as you see fit. Note that in the example above Firefox and Webkit-based browsers (Chrome and Safari) will also get some nice rounded corners. For headings I’m using an arrow icon on the background, the rest of the style is pretty plain:
11. .panel h2, .panelcollapsed h2 12. { 13.font-size: 18px; 14. font-weight: normal; 15. margin: 0px; 16. padding: 4px; 17. background: #CCC url(arrow-up.gif) no-repeat 280px; 18. border-bottom: 1px solid #999; 19. -moz-border-radius: 3px; 20. -webkit-border-radius: 3px; 21. border-top: 1px solid #FFF; 22. border-right: 1px solid #FFF; 23. border-left: 1px solid #FFF; 24. }

For a collapsed panel, we want to change the style slightly and changethe arrow direction:
25. .panelcollapsed h2 26. { 27. background: #CCC url(arrow-dn.gif) no-repeat 280px; 28. border-color: #CCC; 29. }

©2009 RichNetApps.com

Javascript animated collapsible panels without any frameworks

3

I also wanted to add a little ‘rollover’ effect on the heading (not visible in IE6):
30. .panel h2:hover, .panelcollapsed h2:hover { background-color: #A9BCEF; }Finally, we’ll add just a little style for the panel content:
31. 32. 33. 34. 35. 36. 37. .panelcontent { background: #EEE; overflow: hidden; } .panelcollapsed .panelcontent { display: none; }

Adding the interactivity
Because I wanted the HTML to be as simple as possible and to work with any number of panels, I did not add links with onclick handlers (e.g. ) and I also didn’t want to have...