Animating Height And Pushing Divs Below

This is what I try to do: When the user clicks on an image (see screenshot below), I'd like some text associated with this image to show up under the row of images (circles). I ha

Solution 1:

There can be multiple ways of doing this.

One way I had done this using CSS3 was using height than using absolute positioning. Since height flows normally not having any positioning problems. But the problem with heights is that you need to give fixed height for CSS transition to work. So workaround for that is to have a extra wrapper around the div to expand and use its height and give it to expanding div like below. Ignore the row and columns classes.

HTML

<divclass="small-12 columns  level-1"><divclass="row category-name "><divclass="small-12 columns"><spanclass="">Click to expand or collapse</span></div></div><divclass="level-2 level-2-container"style="height: 60px;"><divclass="grow-wrapper small-12 columns">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div></div></div>

CSS

.level-2-container {
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
    overflow: hidden;
    /* outline: 1px solid red; */padding: 0;
    overflow:hidden;
}

JavaScript

$(document).on('click', '.level-1', function(event) {
    var$level1 = $(event.currentTarget);
    var$level2 = $level1.find('.level-2-container');
    var$growWrapper = $level1.find('.grow-wrapper');
    var heightToSet = $growWrapper.height();

    growDiv = $level2[0];
    if (growDiv.clientHeight) {
        $level2.height(growDiv.clientHeight);
        $level2.height(0);
    } else {
        growDiv.style.height = heightToSet + "px";
    }

    event.stopPropagation();
});

JS-Fiddle http://jsfiddle.net/hps8p/

Solution 2:

I realise the original question wasn't easy to understand. So basically, when someone clicks on the image (I changed that with a mouseover) some text shows up underneath. Thus you have one block of text (red box) associated with each image. Now, by default I want all the boxes to be hidden, but when the user moves his/her mouse over one image, I want the text associated with this image to appear (using an animation). And when the text shows up, I want the divs which are below it, to be pushed down.

As suggested in the EXCELLENT answer from Vishwanath, the text blocks need somehow to be contained within a another block. I have changed my requirements a bit, but that was only for aesthetical reasons. When the mouse is over one image, it triggers a JS which computes the heigh of the text block that needs to be displayed (this text block is retrieved through its id). Then we adjust the height of the parent div box using this number. Animation of parent's box is done using CSS3 transition. On onmouseleave, the height of the parent's box is reset to 0, and the text is moved back to an area on the screen, where it's not visible.

Here is my solution:

.bio_container
{
    display: inline-block;
    position: relative;
    border: 2 solid green;
    width: 100%;
    transition: height 1s ease-in-out;
    overflow: hidden;
}

.bio
{
    position: absolute;
    top: -200;
    transition: top 1s ease-in-out, opacity 0.5s ease-in-out;
    border: 1 none green;
    z-index: 0;
    opacity: 0;
    border: 1 solid red;
}

</style><script>functionsetimage()
{
    var all = document.getElementsByClassName("portrait");
    for (var i = 0; i < all.length; ++i) {
        var ids = all[i].id;
        all[i].style.backgroundImage = "url('" + ids + "')";
    }
}
functionappear(element)
{
    // compute height of this elementvar tmp = document.getElementById(element);
    var clientHeight = tmp.clientHeight;
    var container = document.getElementsByClassName('bio_container');
    container[0].style.height = clientHeight;
    tmp.style.top = 0;
    tmp.style.opacity = 1;
}
functiondisappear(element)
{
    // compute height of this elementvar tmp = document.getElementById(element);
    var clientHeight = tmp.clientHeight;
    var container = document.getElementsByClassName('bio_container');
    container[0].style.height = 0;
    tmp.style.top = -clientHeight;
    tmp.style.opacity = 0;
}
</script></head><bodyonload="setimage();"><divid="wrapper1"><divstyle="border: 1 none red; margin: 0;"><!-- first state to put some text to explain who we are --><h2>XXX:</h2><divclass="newspaper"><p>In entirely be to at settling felicity. Fruit two match men you seven share.
Needed as or is enough points. Miles at smart no marry whole linen mr.
Income joy nor can wisdom summer. Extremely depending he gentleman improving
intention rapturous as.</p></div><!-- then add profile / readers can find more information --><h2>YYY:</h2><ahref="#elle1"onmouseover="appear('elle1');"onmouseleave="disappear('elle1');"><divid="images/elle.png"class="portrait"></div></a><ahref="#elle2"onmouseover="appear('elle2');"onmouseleave="disappear('elle2');"><divid="images/elle2.png"class="portrait"></div></a></div><divclass="bio_container"><divid="elle1"class="bio"><p>On no twenty spring of in esteem spirit likely estate. Continue new you
declared differed learning bringing honoured. At mean mind so upon they rent
am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time
gone him his dear sure. Fat decisively estimating affronting assistance not.
Resolve pursuit regular so calling me. West he plan girl been my then up no.
On no twenty spring of in esteem spirit likely estate. Continue new you
declared differed learning bringing honoured. At mean mind so upon they rent
am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time
gone him his dear sure. Fat decisively estimating affronting assistance not.
Resolve pursuit regular so calling me. West he plan girl been my then up no.</p></div><divid="elle2"class="bio"><p>asdasd asd asd asd asdas dasd asdasd asdasd asd sdas dasd asd asdasd asd
asd asd asd asd as das dasdasdalksjd lsajd iUoeuwr sdlkjf;sdfj a;sdkjf ad.</p></div></div><div>test</div></div>