Кнопка на js при активации изменяется и производит обратные действия

У меня на сайте есть кнопка, которая при нажатии убирает 1 секцию. Я хочу чтобы на ней 2м действием было "убрать footer", и изменить изображение кнопки.

А после при нажатии уже на изменённую кнопку, она при обретала первоначальный вид и footer появлялся.

const switcherPages = document.querySelector('.switcher-pages');
const home = document.querySelector('.home');

switcherPages.addEventListener('click', () => {
    switcherPages.classList.toggle('active');
    home.classList.toggle('active');

    const footer = document.querySelector('#f-id').classList;
    $('#f-id').css('visible','visibility').hide();
})

Я написал вот такой вариант, но при повторном нажатии footer не возвращается, и не смог реализовать изменение картинки в кнопке.

new question::

const switcherPages = document.querySelector('.switcher-pages');
const home = document.querySelector('.home');
const footer = document.querySelector('.footer');
let condition = true; 

switcherPages.addEventListener('click', () => {
    if (condition) 
    { // block of code to be executed if the condition is true 
        switcherPages.classList.toggle('active');
        home.classList.toggle('active');
        footer.style.visibility = 'hidden';
     condition = false; 
    } else
    { // block of code to be executed if the condition is false
        switcherPages.classList.toggle('active');
        home.classList.toggle('active');
        footer.style.visibility = 'visible';
     condition = true; 
    } 
});