function toggleClass(ids, option) {
    ids.forEach(id => {
        var element = document.getElementById(id);
        var className = element.getAttribute("class").replace(/ .*/, '');
        console.log(className);
        if (id === option) {
            element.classList.replace(className, "selected");
        } else {
            element.classList.replace(className, "not-selected");
        }
    })
}

function navbarCollapse() {
    var element = document.getElementById('nav');
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        element.classList.add("navbar-shrink");
        element.classList.add("fixed-top");
    } else {
        element.classList.remove("navbar-shrink");
        element.classList.remove("fixed-top");
    }
};
navbarCollapse();
window.onscroll = function () { navbarCollapse() };

function dropdownToggle(dropdownId) {
    this.closeOpenDropdowns();
    document.getElementById(dropdownId).classList.toggle("show");
}

function closeOpenDropdowns() {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
        }
    }
}

// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {
        this.closeOpenDropdowns();
    }
}