Использование «onclick» в html для функции JavaScript, работающей только один раз

Question

Очень коротко, я пытаюсь создать способ выдвинуть div и сделать его видимым с помощью clicking кнопки на webpage. У меня css и макет выглядят корректно, и animation запускается один раз, но потом снова не работает.

это полный файл js

var button1Toggle;
var button2Toggle;
var button3Toggle;

button1Toggle = false;

function slideOutFunc() {
    if (button1Toggle == false) {
        document.getElementById('fade-in1').style.left = '0';
        document.getElementById('fade-in1').style.opacity = '1';
        button1Toggle = true;
    } else {
        document.getElementById('fade-in1').style.left = '-33vw';
        document.getElementById('fade-in1').style.opacity = '0';
        button1Toggle = true;
    }
}

<button id="clickApply" class="applyButton" onclick="slideOutFunc()"><a>Apply</a></button>

это html portion, который вызывает функцию

Буду признателен за любую помощь в понимании, почему это работает только один раз.

Answer 1

Оба условия в sildeOutFunc установлены buttonToggle в true