扩展盒

Question

I am looking forward to find a jQuery code that allows me to have the following behaviour (in the pictures). So I have a grid as shown below and if someone clicks on the red area (a DIV), that div will cover (go over the top) the boxes around it (two boxes from right or left side, one underneath or at the top) And if he clicks again, the div goes back to its normal position and size I can't figure out how do I achieve this? I would appreciate if someone can help please.

Stage 1: http://img341.imageshack.us/img341/461/stage1.jpg

Stage 2: http://img153.imageshack.us/img153/9601/stage2n.jpg

Answer 1

This took me longer than I would care to admit:

http://jsfiddle.net/d4DZd/

The trick is to clone the element and grow that one instead of the original so that the elements keep their position.

Answer 2

Like this?

http://jsfiddle.net/kbPqU/

$(".box-spec").click(function() {
    var cover_width = 3,cover_height = 3;
    $("body").prepend('<div class="box-spec" style="width:' + ((128 + 10) * cover_width) + 'px;height:' + ((128 + 10) * cover_height) + 'px"></div>');
});