Flipping div's with onclick

Question

ok, sorry for amateur status but i need a little help. All i want to do is have a div(mian) with 2 divs in it (div-front), (div-back), that when I click main div the div-front and div back rotate. then when main div is clicked again they rotate back.

<div id="main"> <div id="front">Some text</div> <div id="back">Some other text</div> </div>

this is kinda the setup I'm referring to. I have tried using a toggleClass but I assume I just dont understand it enough. Any Help is appreciated. Thanks in advance.

Answer 1

You'll need to add a click-listener. When the element is clicked, it will run the function you define, and that is where you'd have your call to toggleClassName

document.getElementById('flip').addEventListener( 'click', function(){
    card.toggleClassName('flipped');
  }, false);

Sources:

http://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html
http://desandro.github.io/3dtransforms/js/flip-card.js

More on event listeners in javascript:

developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener