Display additional information using overlapping divs. JQuery

I want to show additional content / text in a div. Take a look at the fiddle: http://jsfiddle.net/P6JGY/132/ . No text yet. But it's not a problem.

I use code, although I can switch classes h2/ h1,

$('#container .item.w1.h1').toggle(
    function() {
        $(this).css(
            {"height": "110px", "background": "black"}
        );
    },
    function() {
        $(this).css(
            {"height": "50px", "background": "#CCC"}
        );
    }
);

First I want to get `div.item.w1.h1 'to overlap my lower neighbor. As you now see, this happens under his neighbor) Howcome I fix it.

The more advanced thing that I think of is how to make, in addition to the first, angular div.item.w1.h1 divs for growth / application — described above, when pressed, in the center of the parent container.

Many thanks!