Adding addEventListener witch click to if/else statement

I'm fairly still new to coding especially JavaScript, so I wanted to ask for help as I cannot see how to solve this problem I have. I want to create a table with buttons where when you click on one button, one infobox is revealed while the rest are hidden. I want to display one box at a time and not at once. Thank you beforehand!

.hide has 'display:none' and .visible has 'display:flex'

function startInfobox1() {
    console.log("start info1");
    document.querySelector(".button1").addEventListener("click", toggleInfo1);

    document.querySelector(".content-info1").classList.add("hide");
}

function toggleInfo1() {
    var info1 = document.querySelector(".content-info1");
    var info2 = document.querySelector(".content-info2");
    var info3 = document.querySelector(".content-info3");
    var info4 = document.querySelector(".content-info4");
    var info5 = document.querySelector(".content-info5");
    var info6 = document.querySelector(".content-info6");

    if (info1.addEventListener("click") == true) {
        info1.classList.remove = "hide";
        info1.classList.add = "visible";

        info2.classList.add = "hide";
        info3.classList.add = "hide";
        info4.classList.add = "hide";
        info5.classList.add = "hide";
        info6.classList.add = "hide";
    } else {
        info1.classList.remove = "visible";
        info1.classList.add = "hide";

    }
}