CODEWITHSUNDEEP
javascriptrotatetransform
user3669714
user3669714

Reputation: 90

Flipping div's with onclick

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.

Upvotes: 3

Views: 12445

Answers (2)

Ayo Adesina
Ayo Adesina

Reputation: 2415

Here is a very straight forward example using JQuery.

https://jsfiddle.net/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');
}

Upvotes: 1

zeitoon
zeitoon

Reputation: 381

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

Upvotes: 1

Related Questions