Attempting to create two 50% high divs-stacked in a push/pull "hideTop/showBoth/HideBottom" configuration

The layout solution I'm trying to pull off involves a 960px(W) x 100%(H) centered wrapper. Within that wrapper are two stacked divs (960px(W) x 50%(H) stacked on top of another 960px(W) x 50%(H)). The interface I'm looking for is three varying views, animated with jquery.

1. (default) Both divs visible
2. click down arrow icon and have top div increase it's height to 99% leaving a 1% reveal (on which provides an up arrow icon to toggle back to the 50/50 view).
3. click up arrow icon and have bottom div increase it's height to 99% leaving a 1% reveal and a down arro开发者_Python百科w icon to toggle back to the 50/50 view.

Push and pull, two equally important pieces of content, both better seen at full screen height.

This is a good start: http://jsfiddle.net/e2G6Y/.
You will need to modify the class detection part (if($(this).attr("class") == "equal")) if you want it to work on multiple classes.
You will also need to add the re-open arrows as you see fit.