javascript - How to 'slideUp' remaining portion of the div? -

i have div showing portion of top using absolute positioning , hidden overflow. when hover on want show remaining portion of div. div different total height based on info inside.

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

.showall {     bottom: 0px; }  .showlittle {     top: 265px; } 

and jquery:

$(item).find('.info').toggleclass('showlittle showall'); 

as can see this example, have working "pops" 1 other. want animate , "slide" , down rather "popping" 1 other.

any suggestions?

instead of using top property use negative bottom value:

.showlittle {     bottom: -105px; } 

and use transition:

.info {     transition: .2s; } 

demo: jsfiddle

an alternative way, if want dynamic height, use jquery calculate offset:

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

and set following css:

.showall {     bottom: 0 !important; } 

demo: jsfiddle