Animated Collapsible Panel in HTML

Jul 5

Animated Collapsible Panel in HTML

Download Source Code: AnimatedCollapsiblePanel.zip - 16.03KB

Page 1 of 412 3 4 »


	First from a series of articles on HTML panels or boxes, that you can freely use for your own website. Step-by-step design of a HTML panel with caption text, gradient background colors, shadow effects, collapse/expand features and animation on collapse/expand. Presentation of main design techniques, using TABLE or DIV elements, CSS and JavaScript code for dynamic behavior. No server-side code required, so you can use these boxes in plain HTML files.

Overview

You can easily find several places on the web where you can build such panels. However, most of the solutions I found are either too complex, use IDs or client-side cookies, or do not have a nice presentation format. We tested current solution on latest versions of Internet Explorer and Firefox, including their Print Preview screens.

With our step-by-step design approach, we hope to clarify why certain techniques are required for such a HTML panel. We also hope you may eventually use just a part of the final panel design, so you can stop at an intermediate step and use, let's say, just a fixed panel with gradient background and shadow, if the collapsing functionality is not interesting for you.

The last chapter presents techniques of reverse-engineering similar HTML panels from external web sites. The goal is to detect not just the portion of HTML code that implements the box, but also all related images, styles and script code.

Our downloadable project includes a HTML page with all the panels designed here, an external CSS file, an external JS file for the JavaScript code, and all images grouped under an images subfolder. If you will gonna use a different file structure, don't forget to change all references to image locations to your own, in both the HTML files and CSS file. As sample image, we used the thumbnail of a nice photo from Switzerland (hope you like it), downloaded for free from BigFoto.com

While HTML panel design does not require server-side code or a particular web development environment, by keeping it generic you will be able to use this code in any kind of web-based project: ASP, ASP.NET, PHP, ColdFusion or just simple HTML local or published pages.

Fixed Panel Design

Title goes here

Content goes here...

This should be trivial, is this right? I mean, it's so easy and obvious to create and use a HTML TABLE with two rows, first row with a caption text and a different background color. To look nice, we should also add a border.

It is easy indeed, but most web programmers spend a lot of time figuring out what the best attribute values should be, for the best color scheme, layout and definition. This is where templates may help, because other people before us did the job.

There are also some possible traps you may get into. For instance, the border=1 setting for a TABLE element does not give you a solid thin one-pixel wide border. And tables with default outlined borders look different in Internet Explorer and Firefox. You should rather use CSS, with style="border: solid 1px".

Show in new browser window
<html>
<body>
<!-- Immediate TABLE-based HTML panel with border=1 -->
<table cellspacing="0" cellpadding="5" width="170"
 border="1" style="border-color:#336699; text-align:center;">
    <tr><td bgcolor="#336699" style="color:#ffffff;">
        Title goes here
    </td></tr>
    <tr><td bgcolor="#f5f5f5">
        <img width="150" height="100" src="../images/sample_photo.jpg"
         alt="This is an image" title="This is an image" /><br />
         Content goes here...
    </td></tr>
</table>
</body>
</html>

It's also recommended to use DIV, rather than TABLE, with the same CSS style setting for border. Both DIV and TABLE are block HTML elements, but DIV rendering is considered more reliable. And you don't have to use TR and TD elements either. Anyway, most our techniques use either DIV, or TABLE, or combinations of both.

Title goes here

Content goes here...

No need of images, JavaScript code, external files or other code sequences. We used a color scheme with a dark blue for the caption bar and the thin border - in tone with the dominant color of the photo - and a white smoke (light gray) for the background. The contrast is strong enough and the lines sharp.

Remark the usage of float:right style in the DIV element, which allows us to present the box aligned to the right and inline with our text.

Most tricky and sometimes confusing layout attributes are those related to margins between sibling and nested HTML elements. TABLE cellpadding - which by default is not zero - defines the margins kept within each table cell. TABLE cellspacing - also not zero by default - defines the space between adjacent cells and rows. If you don't need them, turn them off by explicitly setting them to 0.

It's better to define them through CSS anyway. This works for both TABLE and DIV, and you can eventually declare them individually for each side (top, bottom, left and right). For a TABLE, padding is similar to cellpadding, but there is no spacing CSS attribute. There is the margin attribute, but this defines the outer space - not the inner space - left between the element and its parent.

Here is the HTML code for the simple panel with a really thin border, using a TABLE container and inline style declarations:

Show in new browser window
<html>
<body>
<!-- TABLE-based HTML panel with thin border -->
<table cellspacing="0" cellpadding="0"
 style="width:170px; border: solid 1px #336699; text-align:center;">
    <tr>
    <td style="background-color:#336699;color:#ffffff;padding:5px;">
        Title goes here
    </td>
    </tr>
    <tr><td style="background-color:#f5f5f5;padding:10px;">
        <img width="150" height="100" src="../images/sample_photo.jpg"
         alt="This is an image" title="This is an image" /><br />
         Content goes here...
    </td></tr>
</table>
</body>
</html>

And here is the equivalent version using a DIV container:

Show in new browser window
<html>
<body>
<!-- DIV-based HTML panel with thin border -->
<div style="width:170px;border:solid 1px #336699;text-align:center;">
    <div style="background-color:#336699;color:#ffffff;padding:5px;">
        Title goes here
    </div>
    <div style="background-color:#f5f5f5;padding:10px;">
        <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>
</body>
</html>

Title goes here

Content goes here...

We'll now keep our latest DIV-based version and we'll add two new elements: (1) a gradient background for the caption bar and (2) a shadow image, below the content panel.

Gradient backgrounds show a base color in different nuances, from light to dark, on the vertical or horizontal axis. What's great with gradients, you need in fact a very small image, which gets repeated. Our blue-based gradient image here is a 20x60 PNG, which will get extended to whatever the size of our caption block will be. All you need is to replace the background-color style attribute for the caption title with a background-image attribute. And don't forget background-repeat:repeat-x, to auto-repeat the image on the horizontal axis.

There are many techniques to create a shadow, but here is a very simple and visually efficient one, using a single and simple image, to be added immediately after the panel. The image must be large enough to be used in the largest possible panel you may create. When shown within a IMG tag, its width must be set to the same width as the panel. Its height must be also be resized with the same factor, to keep the aspect ratio.

Show in new browser window
<html>
<body>
<!-- DIV-based HTML panel with gradient background and shadow -->
<div style="width:170px;border:solid 1px #336699;text-align:center;">
    <div style="background-image: url(../images/gradient_blue.png);
     background-repeat: repeat-x; color:#ffffff; padding:5px;">
        Title goes here
    </div>
    <div style="background-color:#f5f5f5;padding:10px;">
        <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" src="../images/shadow.gif" alt="" />
</body>
</html>

Page 1 of 412 3 4 »

Subscribe and Share:

17 Comments

1. Dieter Says:
August 13, 2007 at 03:32 PM

How would I code this to collapse all but the current panel?

2. Cristian Says:
August 13, 2007 at 09:51 PM

Not sure what you mean. You have examples of collapsible panels in pages 2 and 3.

3. dieter Says:
August 14, 2007 at 09:13 AM

Sy you have 3 panels on a page with one open. If you click to open another, I would like the original open panel to close at the same time.

4. Cristian Says:
August 14, 2007 at 12:36 PM

I see. Like a main menu: when you open another popup, any other will auto-collapse.
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.

5. dieter Says:
September 13, 2007 at 02:44 PM

I played around with it and couldn't get it to work.

6. Declan Bradley Says:
September 17, 2007 at 05:41 AM

Hi there,
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

7. Dieter Durant Says:
October 12, 2007 at 12:10 PM

Any thoughts on this? I was unable to make it do this.

8. Dieter Durant Says:
October 18, 2007 at 11:26 AM

I have 3 panels on a page with 1 open when the page loads. Is there a way to cose all open panels when I click on a closed panel to open it?

9. Cristian Says:
April 07, 2008 at 07:08 PM

@Declan and @Dieter - check the new Advanced ASP.NET Docking Panel article and open-source project. The panels can extend and collapse horizontally (as Declan said) and implement the "accordion" effect (as required by Dieter).

10. Mel Says:
April 18, 2008 at 07:12 PM

I like this but the box is open in it's initial state. Is there any way to have it closed initially or is it suppose to be closed and I've missed something?

11. Cristian Says:
April 18, 2008 at 09:45 PM

@Mel - in page 3 you have both cases: the box initially open AND closed (collapsed). Check also my article on Advanced ASP.NET Docking Panel

12. Doctor Tea Says:
September 22, 2010 at 12:00 AM

I have the same problems as Mel. How can i have panel collapsed at start up?

13. Cody Says:
September 26, 2010 at 05:44 PM

Hi,

I was wondering how to get the expand and collapse image to work in Safari? Any suggestions?

Thanks

14. Cristian Says:
September 26, 2010 at 09:57 PM

@Cody, I wrote this few years ago, offered it for free on the net, and did not test it on all browsers on the market today. I really don't know when and if I'll have time for an upgrade.

15. Denis Says:
March 03, 2011 at 04:33 AM

Nice and lightweight coding. But, can anyone tell me why it stops working if there is any white space (space, tab or return) between the closing < /div > and next opening < div > as follows:
:
< /div >< div class="squareboxcontent" > //this works fine
:
< /div >
< div class="squareboxcontent" > //stops working
:

16. Denis Says:
March 03, 2011 at 05:58 AM

Oops! I see that the code has been filtered out. here's the problem in words: The script only runs if the closing div tag (after the panel title) is directly followed by the opening div tag (for the panel content). If there is any white space (or anything else, for that matter) between the tags, then the javascript fails. Just wanted to know why.

17. Cristian Says:
March 03, 2011 at 04:44 PM

@Denis, I think in the second case you add a #TEXT between the DIV elements, and different versions of browsers (like IE or IE6 in particular) may treat it in different ways.

XtractPro - Data Extraction and Transformation