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.

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.

• javascript
• rotatetransform

• 5 desandro.github.io/3dtransforms/docs/card-flip.html – j08691 Commented May 23, 2014 at 16:50
• Although this is informative to the accual making of the divs, there is no mention of adding the click function to it. the click function is what i need to understand. Thank you for responce. – user3669714 Commented May 23, 2014 at 17:08
• 1 Sure there is. Read the page, go through the examples, and look at the code. It's all there. We're not going to spoon feed you the answers when it appears you've done nothing more than create three divs. – j08691 Commented May 23, 2014 at 17:10
• +1 @j08691 for extracting the usage concept based on OP's content. – Sunny Patel Commented May 23, 2014 at 17:12

2 Answers 2

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/en-US/docs/Web/API/EventTarget.addEventListener

Here is a very straight forward example using JQuery.

https://jsfiddle/james2doyle/qsQun/

<button onclick="flip()">flip the card</button>
<section class="container">
  <div class="card" onclick="flip()">
    <div class="front">1</div>
    <div class="back">2</div>
  </div>
</section>

and the JS

function flip() {
    $('.card').toggleClass('flipped');
}