Zusätzliche Informationen mit überlappenden divs anzeigen. JQuery

Question

Ich möchte zusätzlichen Inhalt/Text auf einem Div anzeigen. Schau dir die Geige an: http://jsfiddle.net/P6JGY/132/. Es gibt noch keinen Text. Aber es ist nicht das Problem.

ich den Code bin mit, obwohl ich h2/h1 Klassen wechseln könnte,

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

Zuerst, was ich gewinnen will, ist `div .item.w1.h1' seinem unteren Nachbarn zu überlappen. Wie du jetzt sehen kannst, geht es unter seinen Nachbarn. Wie soll ich das beheben?

Fortgeschrittenere Sache, über die ich nachdenke, ist, wie man zusätzlich zu der ersten Sache, Ecke `div .item.w1.h1 'divs zu wachsen/anwenden-die-beschriebenen-oben, wenn angeklickt, in Richtung Zentrum des Elternbehälters ..

Vielen Dank!

Answer 1

Fügen Sie der CSS-Funktion einen Z-Index hinzu. 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'} 
     ); 
    } 
);