var param_list = document.querySelectorAll('div > dl > dt');
var i;

for (i = 0; i < param_list.length; i++) {
    var dt_element = param_list[i];
    var dd_element = dt_element.nextElementSibling;

    dd_element.classList.add("hidden-param");
    dd_element.classList.add("hideable-param");

    dt_element.classList.add("collapsable-param");

    dt_element.addEventListener("click", function(){
        var dd_element = this.nextElementSibling;

        this.classList.toggle("collapsable-param-active");
        dd_element.classList.toggle("hidden-param");

        if (dd_element.classList.contains("hidden-param")){
            dd_element.style.maxHeight = null;
            dd_element.style.overflow = "hidden";
        } else{
            var scrollHeight = dd_element.scrollHeight + 10;
            var transitionDuration = scrollHeight / 2000; // 0.1s per 200px

            dd_element.style.maxHeight = scrollHeight + "px";
            dd_element.style.transition = `max-height ${transitionDuration}s ease-out`;

            dd_element.addEventListener('transitionend', function() {
                if (!this.classList.contains("hidden-param")) {
                    this.style.overflow = "auto";
                }
            }, { once: true });
        }
    });
}
