Download Source Code: AnimatedCollapsiblePanel.zip - 16.03KB
Collapsible Panel Design
Content goes here...
Time has come to add expand and collapse functionality to our latest panel. This dynamic behavior would clearly require some client-side JavaScript code.
Before that, we need another visual element: a chevron image on the title bar, which triggers the actual collapse or expand events, and also shows the current status of the panel. So we actually need two images for the chevron, the second being a 180 vertical rotation of the first. We'll simply name them expand.gif and collapse.gif, created as transparent GIF images.
We'll show the chevron in the right side of the caption bar, and we'll align the caption text to the left. To do so, we'll split our previous DIV caption element into two child DIVs, using float:left and float:right styles for their horizontal alignment within the parent. Which parent shows a hand cursor when mouse moves over it and trigers the togglePanelStatus event when clicked.
For Firefox, we also need to set its height. The overflow:hidden CSS setting dictates that any embedded content larger than the parent will be automatically hidden.
By default, most browsers do not print background images and colors. You can see this in Print Preview mode, if your Page Setup or browser's setting related to background printing is turned off. Our panel will not print its the title bar background color either, but we would like to see at least one thin line separating the caption from the content. This is why we set a border-top style attribute for the content area.
<html> <head> <style type="text/css"> .squarebox { width: 100%; border: solid 1px #336699; text-align: center; overflow: hidden; } .squareboxgradientcaption { color: #ffffff; padding: 5px; background-image: url(../images/gradient_blue.png); background-repeat: repeat-x; } .squareboxcontent { background-color: #f5f5f5; padding: 10px; overflow: hidden; border-top: solid 1px #336699; } </style> <script language="javascript" type="text/javascript"> function togglePannelStatus(content) { var expand = (content.style.display=="none"); content.style.display = (expand ? "block" : "none"); var chevron = content.parentNode .firstChild.childNodes[1].childNodes[0]; chevron.src = chevron.src .split(expand ? "expand.gif" : "collapse.gif") .join(expand ? "collapse.gif" : "expand.gif"); } </script> </head> <body> <!-- Collapsible panel, with separate CSS and JavaScript --> <div style="width:170px;"> <div class="squarebox"><div class="squareboxgradientcaption" style="height:20px; cursor: pointer;" onclick="togglePannelStatus(this.nextSibling)"><div style="float: left">Title goes here...</div><div style="float: right; vertical-align: middle"><img src="../images/collapse.gif" width="13" height="14" border="0" alt="Show/Hide" title="Show/Hide" /></div> </div><div class="squareboxcontent"> <img width="150" height="100" src="../images/sample_photo.jpg" alt="This is an image" title="This is an image" /><br /> Content goes here... </div> </div> <img width="170" height="20" alt="" src="../images/shadow.gif" /> </div> </body> </html>
To show your panel initially collapsed, set the display style of the content to "none" and the chevron image source to expand.gif.
Remark the few other changes to this code. We separated the main CSS styles as CSS classes, declared in a STYLE block, in the HEAD section of the page.
Styles are now referenced from HTML elements by class names. This is useful for reusability, better structuring and to create a more compact HTML code. If you create several panels with similar styles in the same page, it's easier to specify just the CSS class name, not to repeat the same values again and again. Whenever you need additional styles for a HTML element already rendered through a CSS class, append a style attribute with custom inline CSS styles.
Look now at our JavaScript code, within SCRIPT tags in the HEAD section of the page.
The caption title calls the togglePannelStatus function when clicked, passing as argument the DIV content element. This element will be hidden (display="none") on collapse and shown (display="block") on expand. The rest of the code changes the source of the chevron image. Remark that, with the SPLIT-JOIN combination on the SRC attribute string of the IMG, we change just the name of the image file, no matter what's its full URL.
Many implementations of similar collapsible panels you'll find on the web are way too complex in an unnecessary manner. Some require unique id attribute values, client-side cookies, elements accessed through document.getElementById calls... We need none of these. Using just the JavaScript DOM (Document Object Model) of our block of code, and nothing else, we referred to all these HTML element in a relative manner. There are four main DOM-related properties you should know and use, as illustrated in the picture from the right: parentNode, nextSibling, firstChild and childNodes array.
JavaScript DOM is now a standard for most browsers, but there is a major point you should take care of: unlike Internet Explorer, Firefox will not ignore white spaces between two elements, but will consider them a #Text DOM node. So keep declarations of consecutive embedded HTML tags the way they are here, with no spaces between a closing tag and the next start tag.
You can eventually encapsulate the whole HTML code of the panel in a function, class or server-side web control, that you can call with different parameter values, such as whether it should be initially expanded or collapsed, its width, the title string, the HTML content, whether or not you want the shadow and the panel collapsable...
The good thing with this server-side ASP.NET/PHP or even client-side JavaScript function is you can automatically adjust the size of the shadow image and your code becomes more compact. Future improvements you may bring to this function will automatically propagate to all your web site pages where the panel is used.
Subscribe and Share: 
August 13, 2007 at 03:32 PM
August 13, 2007 at 09:51 PM
August 14, 2007 at 09:13 AM
August 14, 2007 at 12:36 PM
A quick solution can be applied for the first collapsible panel in page 2 (sorry I don't have time enough now for the code - tomorrow I go in vacation :)).
In the generic togglePannelStatus JavaScript function, insert code, at the beginning, to identify all DIVs with squareboxgradientcaption class name and collapse all panels from the page.
September 13, 2007 at 02:44 PM
September 17, 2007 at 05:41 AM
I found your 'Animated Collapsible Panel' tutorial extremely interesting and was wondering if it can be tweaked so that the panels extend and collapse horizontally instead of vertically as in the sreenshot link below:
http://www.igolfscorer.com/widget.jpg
Any advice would be great! Thanks again for the great tutorial!
Kind regards,
Declan
October 12, 2007 at 12:10 PM
October 18, 2007 at 11:26 AM
April 07, 2008 at 07:08 PM
April 18, 2008 at 07:12 PM
April 18, 2008 at 09:45 PM