CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-animations
Jeremy H.
Jeremy H.

Reputation: 523

How to 'slideUp' remaining portion of the div?

I have a div which I am showing just a portion of the top using absolute positioning and hidden overflow. When you hover over I want to show the remaining portion of the div. This div could be different total height based on the info inside.

https://jsfiddle.net/5abs1ocf/4/

.showAll {
    bottom: 0px;
}

.showLittle {
    top: 265px;
}

And the jQuery:

$(item).find('.info').toggleClass('showLittle showAll');

As you can see from this example, I have it working where it "pops" from one to the other. What I really want is for it to animate and "slide" up and down rather than just "popping" from one to the other.

Any suggestions?

Upvotes: 0

Views: 58

Answers (2)

KittMedia
KittMedia

Reputation: 7466

Instead of using the top property use a negative bottom value:

.showLittle {
    bottom: -105px;
}

And then use a transition:

.info {
    transition: all .2s;
}

Demo: JSFiddle

An alternative way, if you want a dynamic height, is to use jQuery to calculate the offset:

    var elementHeight = -($('.info').height() - 34);
    console.log(elementHeight);
    $('.showLittle').css('bottom', elementHeight);

And set the following CSS:

.showAll {
    bottom: 0 !important;
}

Demo: JSFiddle

Upvotes: 2

Etheryte
Etheryte

Reputation: 25321

You don't need Javascript, just use CSS.

.info {
    bottom: 0;
    margin-bottom: -102px;
    transition: margin 0.5s ease;
}
.tree:hover .info {
    margin-bottom: 0;
}

Upvotes: 1

Related Questions