UPDATE: Issue resolved, discovered that Elementor was overriding certain styles. Please refer to my solution below.
I'm attempting to add animation to a simple max-height property of a div, but the transition isn't working as expected. It transitions abruptly. I am trying to imitate this tutorial from w3schools: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate
This is the JavaScript code I am using to modify the max-height on button click:
<script>
var coll = document.getElementsByClassName("section_button");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
Below is my CSS for reference:
.section_content {
max-height: 0;
overflow: hidden;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
The hiding of the div is functional, however, the animation is not working, in contrast to the smooth animation displayed in the w3schools example on my Safari browser. I also tried Chrome with no luck.
Additional information about my setup:
- Browser: Safari 14 (Same issue in Chrome)
- Using Wordpress with Elementor for page construction
- Utilizing Code Snippets plugin for JS injection
I've tested various solutions found online without success. There may be an obvious mistake that I am currently overlooking, so any assistance would be greatly appreciated!