I'm attempting to implement a sliding effect on a div using CSS transitions, but it seems that the transition only works when closing the div.
HTML:
<div class="slider closed" id="more-details"> Some content </div>
CSS:
.slider {
overflow-y: hidden;
transition-property: all;
transition-duration: .8s;
transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
}
.slider.closed {
max-height: 0;
}
.slider.opened {
max-height: 10000px;
}
JS:
$('.read-more').on('click', function(e){
e.preventDefault();
$(this).toggle();
$('#more-details').removeClass('closed').addClass('opened');
$('#read-less').show();
});
$('.read-less').on('click', function(e){
e.preventDefault();
$('#more-details').addClass('closed').removeClass('opened');
$('#read-more').toggle();
});
Although the div opens and closes smoothly, the transition effect appears to be applied only during closing. Any suggestions on how to fix this?