0

Very briefly, I'm trying to create a way to slide out a div and make it visible by clicking a button on the webpage. I have the css and the layout looking correct and the animation runs once but then doesn't work again.

this is the full js file

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>

this is the html portion that calls the function

Any help understanding why it only works once would be appreciated.

2
  • 6
    your else block should set button1Toggle = false;, right?
    – Jack
    Apr 22, 2019 at 15:23
  • 1
    FYI: That code can be cleaned up a tons by toggling a class. Apr 22, 2019 at 15:25

1 Answer 1

0

Both conditions in sildeOutFunc set buttonToggle to true

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.