After creating an accordion, I wanted to enhance the user experience by adding a transition effect whenever they click on the accordion header.
Even though I included height: auto and transition in the accordion container, it did not seem to have any impact.
var texts = document.getElementsByClassName('text');
[].slice.call(texts).forEach(function (text) {
text.onclick = function () {
text.parentElement.classList.toggle('animate');
}
});
Check out this Fiddle for more details
Note: Each content has a different height, so the animation should smoothly open and close each one.
EDIT:
I attempted the suggested solution from a similar question, but the animation is not working perfectly.
The animation only works when opening the accordion, not closing it. Additionally, the last accordion does not animate at all when opened.