My JavaScript (with a little jQuery) isn't doing quite what I want it to do. Can you help me figure out why?

document.addEventListener('DOMContentLoaded', () => {

const catNameDiv = document.getElementById('cat-name-div'); // one div holds all the category names with different classes
const catInfoDiv = document.getElementsByClassName('cat-info-div'); // this is a collection of divs, with ids, holding info 

catNameDiv.addEventListener('click', (e) => {
    const catName = e.target; // category name that was clicked
    const catClass = catName.className; // the class of the category name that was clicked
    const catInfo = document.getElementById(catClass); // div with an id that matches the class of the category name

    for (let i = 0; i < catInfoDiv.length; i += 1) {
        // catInfoDiv is a collection of ALL the divs holding info.
        // info is each div when it goes through the loop
        let info = catInfoDiv[i];
        if (info === catInfo) {
            // catInfo is the one div with info for the category clicked.
            $(catInfo).slideToggle();
        } else if (info != catInfo) {
            $(info).slideUp();
        }; 
    };
});

});