How to split page and reveal stuff underneath?

Question

I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.

As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)

Thanks in advance!

Answer 1

Here's an example to get you started http://jsfiddle.net/Cquhj/

A few things to take away from this pattern:

1. The middle div has an overflow: hidden; property and height: 0px.
2. The trigger icon has an event that tweens the height of the middle div to the size you want.

Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu

Answer 2

here an update, more iphone-like

http://jsfiddle.net/mFeyn/1/

it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.