What is the clipping/CSS code to make a simple box appear to reveal what's behind it?

I have one rectangle on top of a second rectangle. There will be a number of these on the page. When the user clicks on a rectangle, I'd like it to slide up to reveal the rectangle below it. I've been trying to figure out how to do this with css and clipping - but not having any luck. Here's what I have:

sym.$("clipTangle2").css("clip:rect(0, 159px, 0, 0)");

I've tried an number of variations - but when I click on the box - nothing happens. What am I missing?

And when the user clicks on the 'revealed' rectangle, I'd like the top rectangle to revert back to it's original position.

Thanks