slideUp, slideDown, slideToggle

slide.js

// In order for these functions to work, the target element needs a transition CSS property to be set.

function slideUp(element, callback) {
    element.style.overflow = 'hidden';
    element.style.height = element.clientHeight + 'px';

    setTimeout(() => {
        element.style.height = 0;
    }, 0);

    element.addEventListener('transitionend', () => {
        element.style.removeProperty('overflow');
        element.style.removeProperty('height');
        element.style.display = 'none';
        callback && callback();
    }, { once: true });
}

function slideDown(element, callback) {
    element.style.overflow = 'hidden';
    element.style.display = 'block';
    element.style.height = 'auto';

    let targetHeight = element.clientHeight + 'px';

    element.style.height = '0px';

    setTimeout(() => {
        element.style.height = targetHeight;
    }, 0);

    element.addEventListener('transitionend', () => {
        element.style.removeProperty('overflow');
        element.style.removeProperty('height');
        callback && callback();
    }, { once: true });
}

function slideToggle(element, callback) {
    if (getComputedStyle(element).display === 'none') {
        slideDown(element, callback);
    } else {
        slideUp(element, callback);
    }
}