Question

I am using CSS transitions to make a slide out panel. I am using Javascript to fire to animation like so;

function slidein()
    {
    document.getElementById('container').className = 'slidein';
    }

    function slideout()
    {
    document.getElementById('container').className = 'slideout';
    }

<div onclick="slideout()">Click</div> 

What I need to know is once I have fired the first function how can I swap the function so the user can then close the panel.

Answer 1

Try something like this:

var slideState = 'slidein';

function slide() {
    if ( slideState == 'slidein' ) slideout();
    else slidein();
}

function slidein() {
    document.getElementById('container').className = 'slidein';
    slideState = 'slidein';
}

function slideout() {
    document.getElementById('container').className = 'slideout';
    slideState = 'slideout';
}

<div onclick="slide()">Click</div>