Blind effect on image

Question

I'm trying to create a vertical (upwards) blind effect on the children of a container (making them disappear from the container) on click of the container, but for some reason this is only working on text. The icon in the container is not moving at all, I wondered if this is natural or if some of the code might be affecting it this way.

The jquery is $(this).children().toggle( "blind", {direction: "vertical" }, 1000 );

The html looks like:

<div class="parent">
   <div class="child" id="icon">
     <img />
   </div>
   <div class="child" id="text">
     <h1> Some Title </h1>
     <p> Some text </p>
   </div>
</div>

The only css on the child is a float:left (i didn't build this so don't bash me for the floating layouts) and display: table

I didn't think the float could affect this, as the float is a left to right affect, and i am toggling vertical. I chanced the display to block just to see how it would work and was getting the same results. On a similar element I am doing the same effect and it works fine, the difference being the image and the float.

Thanks in advance!

Answer 1

Maybe additional div will help?

<div class="parent">
    <div>
       <div class="child" id="icon">
       </div>
       <div class="child" id="text">
       <h1> Some Title </h1>
       <p> Some text </p>
       </div>
    </div>
</div>