Div within Div hides when outer div animates

Question

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 real

Answer 1

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 -->
<div id="hex4" class="hex hex-4">
            <div class="inner">
                    <h5>Síguenos a trevés de redes sociales</h5>
            </div>  
            <div class="corner-1"></div>
            <div class="corner-2"></div>        
        </div>
<section id="seccionGrid" class="colorGrey seccionGridOn">


</section>
<!-- Redes Sociales -->

Answer 2

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/