Attempting to adjust the maximum height of a ul. When the max-height property changes (via toggling a class), the height shifts immediately, while the items below the ul maintain the animated height as expected.
var expander = $('.skill-expand');
var skillsUl = $('.skills-list');
expander.on('click', function() {
skillsUl.toggleClass('unexpanded');
if (skillsUl.hasClass('unexpanded')) {
expander.html('<span class="fa fa-chevron-down">..\/..</span>');
} else {
expander.html('<span class="fa fa-chevron-up">../\..</span>');
}
return false;
});.skills-list {
margin: 0;
padding: 0;
transition: max-height 1s ease-in-out;
max-height: 800px;
/*effectively auto*/
}
.skill-expand {
margin: auto;
text-align: center;
display: block;
}
.skills-list.unexpanded {
max-height: 60px;
overflow: hidden;
transition: max-height 1s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="skills-list unexpanded">
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
...
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
</ul>
<a href="#" class="skill-expand"><span class="fa fa-chevron-up">..\/..</span></a>https://jsfiddle.net/ubgmshzo/
After clicking the ..\/.. expander text, observe the delay in the movement of the expander element downwards. Any specific reason for this phenomenon?