Aslında başlangıçta ben de jquery kullanmak istemediğinizi farz edip aynı özellikte çalışan ama daha uzun bir kod bloğu bulmuştum ama sitenize bakınca jquery olduğunu fark ettim. Jquery ile daha kısa olur diye öyle yolladım.
Şu sayfadaki kaynak kodları alıp kendinize göre düzenleme imkanınız var mıdır?
En basit kullanım şekli şöyle; Önce slideUp ve SlideDown özellikleri tanımlanıyor sonra her ikisini de kullanan slideToggle çalışıyor;


let slideUp = (target, duration=500) => {
target.style.transitionProperty = 'height, margin, padding';
target.style.transitionDuration = duration + 'ms';
target.style.boxSizing = 'border-box';
target.style.height = target.offsetHeight + 'px';
target.offsetHeight;
target.style.overflow = 'hidden';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
window.setTimeout( () => {
target.style.display = 'none';
target.style.removeProperty('height');
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
target.style.removeProperty('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
//alert("!");
}, duration);
}

let slideDown = (target, duration=500) => {
target.style.removeProperty('display');
let display = window.getComputedStyle(target).display;

if (display === 'none')
display = 'block';

target.style.display = display;
let height = target.offsetHeight;
target.style.overflow = 'hidden';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
target.offsetHeight;
target.style.boxSizing = 'border-box';
target.style.transitionProperty = "height, margin, padding";
target.style.transitionDuration = duration + 'ms';
target.style.height = height + 'px';
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
window.setTimeout( () => {
target.style.removeProperty('height');
target.style.removeProperty('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
}, duration);
}
var slideToggle = (target, duration = 500) => {
if (window.getComputedStyle(target).display === 'none') {
return slideDown(target, duration);
} else {
return slideUp(target, duration);
}
}


Kullanılışı

document.getElementById("triggerUp").addEventListener('click', function() {
slideUp(document.getElementById("target"), 200);
});

document.getElementById("triggerDown").addEventListener('click', function() {
slideDown(document.getElementById("target"), 200);
});

document.getElementById("triggerToggle").addEventListener('click', function() {
slideToggle(document.getElementById("target"), 200);
});


Tabii burada id değil queryselector ile class adının seçmeniz gerekir.