Showing additional info using overlapping divs. JQuery

Question

I want to show additional content/text on a div. Look at the fiddle: http://jsfiddle.net/P6JGY/132/. There's no text yet. But it isn't the problem.

I'm using the code, though I could toggle h2/h1 classes,

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

At first what I want to gain is `div .item.w1.h1' to overlap its lower neighbour. As you can see now it's going beneath its neighbour) Howcome I fix that.

More advanced thing I'm thinking about is how to make, in addition to first thing, corner `div .item.w1.h1' divs to grow/apply-the-described-above, when clicked, towards center of the parent container..

Many thanks!

Answer 1

Add a z-index to the css function. http://jsfiddle.net/P6JGY/133/

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