Inverted animate from a "close" button

Question

I’m developing a Animate with JS and CSS, which when clicking the button, the element does the bounceOutLeft and Right, and so shows the hidden content. The animation is working, however, how to make a "close" button, and when you click on it, the button goes back to its place, that is, does the effect backwards? If made bounceOutLeft, he’s going to do the BounceOutRight.

HTML

<div class="container animated">
    <div class="star">★</div>
    <span>GIRLS</span>
</div>
<div class="container2 animated">
    <div class="star">★</div>
    <span>BOYS</span>
</div>

    <div id="conteudo">
        <span> conteudo </span>
    </div>

    <div id="conteudo2">
        <span> conteudo2 </span>
    </div>

CSS

.container {
    font-size: 40px;
    background: #C9C9C9;
    padding: 20px;
    width: 100px;
    text-align: center;
    border-radius: 6px;
    margin: 0 auto;
    cursor: pointer;
    line-height: 20px;
}

.container2 {
    font-size: 40px;
    background: #C9C9C9;
    padding: 20px;
    width: 100px;
    text-align: center;
    border-radius: 6px;
    margin: 0 auto;
    cursor: pointer;
    line-height: 20px;
}
.container span {
    display: block;
    margin: 12px 0 0 0;
    font-size: 16px;
    font-weight: bold;
}

.container2 span {
    display: block;
    margin: 12px 0 0 0;
    font-size: 16px;
    font-weight: bold;
}

JS

var el = document.querySelector(".container");
var el2 = document.querySelector(".container2");

var controller = Animate(el);
var controller2 = Animate(el2);

var link = document.getElementById('conteudo');
link.style.display = 'none';

var link2 = document.getElementById('conteudo2');
link2.style.display = 'none';

el.addEventListener("click", function() {

    // mixture
    controller

    .add("bounceOutRight");
    link.style.display = '';  
});

el2.addEventListener("click", function() {

    // mixture
    controller2

    .add("bounceOutLeft");
    link2.style.display = '';  
});

Jsfiddle

Answer 1

Leave your HTML like this:

<div class="container animated">
    <div class="star">★</div>
    <span>GIRLS</span>
</div>

<div id="conteudo">
    <span> conteudo </span>
    <button id='botao'>Fechar</button> <!-- adicione esse botão -->
</div>

Add the following to the end of your Javascript:

document.getElementById('botao').addEventListener('click', function() {
    //remove a classe da animação e torna a div visível novamente
    controller.remove('.bounceOutRight');
    //oculta a div de conteúdo
    link.style.display = 'none';
});

See also on Jsfiddle

The same goes for the second link/content.

Alternative

If you want you can also use jQuery which gives you a huge help when displaying/hiding elements with animations. View jQuery’s animation documentation here.