CODEWITHSUNDEEP
javascriptjqueryhtmlcss
markusman
markusman

Reputation: 73

Transition properties not working when toggle HTML element class for size?

Just a simple CSS and jQuery function to ease the transition when removing a class. I have tried using Jquery too, nothing seems to work. Been through at least a dozen attempts, any ideas?

jQuery

$(document).ready(function(){
$(document).on('click', '.review-block', function(){
    $(this).find(".review-body").toggleClass('small');
 }); 
});

CSS

.review-body{
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 5px;
    font-family: sans-serif;
    font-size: 15px;
    margin-bottom: 10px;
    overflow: hidden;
     transition: all 1s ease;
}
.small{
    max-height: 125px;
}

HTML

<div class="review-body small">
  //TEXT HERE
</div>

Upvotes: 0

Views: 27

Answers (2)

Terry
Terry

Reputation: 66123

The reason why no transition is observed, is because in .review-body there is no explicit max-height set, which means it uses the initial value of auto. You can't transition between a non-pixel value (e.g. auto, 100%...) to a set pixel value.

A solution will be to give .review-body a larger that necessary max-height value in pixels, so that CSS transition will still work without cutting of the content inside of it.

Upvotes: 1

R Greenstreet
R Greenstreet

Reputation: 740

I think you might need to add that transition property to both classes. Check out this codepen from MDN: https://codepen.io/pen/?&editable=true

Upvotes: 0

Related Questions