I've been working on implementing a responsive collapsible panel for my website, and I came across an example on W3Schools. However, the example had a flaw - resizing the window after expanding or collapsing the panel caused it to not scale properly.
EDIT: Check out these screenshots:
https://i.sstatic.net/Qc3Du.png
https://i.sstatic.net/1Cpw1.png
Here is their example:
Code for collapsible section
// Button Collapsible
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) { content.style.maxHeight = null; }
else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
CSS Code for affected panel
.aboutCollapsible {
font: 16px/24px "Roboto";
background: #202020;
text-align: justify;
margin-bottom: 20px;
width: 580px;
max-width: 100%;
padding: 1px 20px 5px 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
My query: How can I maintain the smooth scrolling animation of the panel while ensuring it responds correctly to window scaling? I prefer sticking to just HTML, CSS, and JavaScript without using Bootstrap or other frameworks
What I have attempted: I experimented with changing the measurements from pixels to percentages, but that didn't solve the issue with the animation.