Flip content of a div on clicking a button

Question

I am learning this 3D effect of flipping content of a div. On hover the div code below works perfectly. But What I want is that, if someone only click on the button flip this flipping of div should work. I want this flipping effect only if button is clicked not if hover or anything.

    <style>
    #f1_container {
      position: relative;
      margin: 10px auto;
      width: 450px;
      height: 281px;
      z-index: 1;
    }
    #f1_container {
      perspective: 1000;
    }
    #f1_card {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: all 1.0s linear;
    }
    #f1_container:hover #f1_card {
      transform: rotateX(180deg);
      box-shadow: -5px 5px 5px #aaa;
    }
    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }
    .face.back {
      display: block;
      transform: rotateX(180deg);
      box-sizing: border-box;
      padding: 10px;
      color: white;
      text-align: center;
      background-color: #aaa;
    }
    </style>

    <div id="f1_container">
    <div id="f1_card" class="shadow">
      <div class="front face">
    lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />
    lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />
    lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />
      </div>
      <div class="back face center">
        <p>This is nice for exposing more information about an image.</p>
        <p>Any content can go here.</p>
      </div>
    </div>
    </div>
<button class="btn btn-primary" id="flip_content">Flip</button>

Answer 1

You could use JavaScript to handle click events on button.

1^st Approach: Using .classList.toggle().

content.classList.toggle('flip') will add the class .flip, if it doesn't exist and will remove if it exists.

var btn = document.getElementById('flip_content');
var content = document.getElementById('f1_card');
btn.onclick = function() {
  content.classList.toggle('flip');
}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.flip {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<div id="f1_container">
  <div id="f1_card" class="shadow">
    <div class="front face">
      lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />
    </div>
    <div class="back face center">
      <p>This is nice for exposing more information about an image.</p>
      <p>Any content can go here.</p>
    </div>
  </div>
</div>
<button class="btn btn-primary" id="flip_content">Flip</button>

---

2^nd Approach: Using .classList.add() and .classList.remove().

You could keep track of clicks, if the count is divisible by 2, add the class .flip, else remove it.

var btn = document.getElementById('flip_content');
var content = document.getElementById('f1_card');
var c = 0;
btn.onclick = function() {
  (c++ % 2 == 0) ? content.classList.add('flip'): content.classList.remove('flip');
}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.flip {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<div id="f1_container">
  <div id="f1_card" class="shadow">
    <div class="front face">lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />
    </div>
    <div class="back face center">
      <p>This is nice for exposing more information about an image.</p>
      <p>Any content can go here.</p>
    </div>
  </div>
</div>
<button class="btn btn-primary" id="flip_content">Flip</button>

---

3^rd Approach: Using .className.

var btn = document.getElementById('flip_content');
var content = document.getElementById('f1_card');
var c = 0;
btn.onclick = function() {
  content.className = (c++ % 2 == 0) ? content.className + ' flip' : content.className.split(' ')[0];
}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.flip {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<div id="f1_container">
  <div id="f1_card" class="shadow">
    <div class="front face">lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />
    </div>
    <div class="back face center">
      <p>This is nice for exposing more information about an image.</p>
      <p>Any content can go here.</p>
    </div>
  </div>
</div>
<button class="btn btn-primary" id="flip_content">Flip</button>

---

.classList returns an array of all classes assigned to the element.

For instance,

<div id="div" class="one two three four five"></div>

document.getElementById('div').classList
//['one', 'two', 'three', 'four', 'five']

---

.className returns a string of all classes(comma seperated) assigned to the element.

For instance,

<div id="div" class="one two three four five"></div>

document.getElementById('div').className
//'one two three four five'

---