Div Within Div Hides When Outer Div Animates

I have a parent div with height 0 and a child div within, but on top using z-index. I want this child div when clicked to expand the height of the parent div. Works great really

Solution 1:

As the div animates jQuery sets its overflow property to hidden (else it wouldn't be able to restrict how high it appears). Then, on completion, it returns the overflow to its previous value.

If you move the hex button outside of the expanding/collapsing section it will work.

eg: http://jsfiddle.net/NChK3/

Solution 2:

If you move the Hex outside the div you wont have the issue, and it will look just as good

http://jsfiddle.net/xQVjq/1/

<!-- Redes Sociales --><divid="hex4"class="hex hex-4"><divclass="inner"><h5>Síguenos a trevés de redes sociales</h5></div><divclass="corner-1"></div><divclass="corner-2"></div></div><sectionid="seccionGrid"class="colorGrey seccionGridOn"></section><!-- Redes Sociales -->