CODEWITHSUNDEEP
htmlcss
beny lim
beny lim

Reputation: 1304

Onclick function instead of hover

I have the following code that allows me to hover over a div. When hover over the div showing "Front Content", it will flip over and show "Back Content". Vice versa.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style>
        .flipdiv {
            position: relative;
            width: 220px;
            height: 160px;
            perspective: 500px;
        }

            .flipdiv.v:hover .front, .flipdiv.v.flip .front {
                transform: rotateX(180deg);
            }

            .flipdiv.v:hover .back, .flipdiv.v.flip .back {
                transform: rotateX(0deg);
            }

            .flipdiv.v .back {
                transform: rotateX(-180deg);
            }


            .flipdiv .front, .flipdiv .back {
                position: absolute;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                transition: all 0.5s ease-in;
                color: white;
                background-color: #000;
                padding: 10px;
                backface-visibility: hidden;
            }
    </style>
    </head>
<body>
    <div class="flipdiv v">
        <div class="front">
            Front Content
        </div>
        <div class="back">
            Back Content
        </div>
    </div>
</body>
</html>

However, I am trying to change this piece of code from hover to onclick. But couldn't to do it. Any idea how I can modify the code to onclick?

Thanks in advance.

Upvotes: 0

Views: 1090

Answers (2)

vinayakj
vinayakj

Reputation: 5681

.flipdiv {
            position: relative;
            width: 220px;
            height: 160px;
            perspective: 500px;
        }

            .flipdiv.v.clicked .front, .flipdiv.v.flip .front {
                transform: rotateX(180deg);
            }

            .flipdiv.v.clicked .back, .flipdiv.v.flip .back {
                transform: rotateX(0deg);
            }

            .flipdiv.v .back {
                transform: rotateX(-180deg);
            }


            .flipdiv .front, .flipdiv .back {
                position: absolute;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                transition: all 0.5s ease-in;
                color: white;
                background-color: #000;
                padding: 10px;
                backface-visibility: hidden;
            }
<div class="flipdiv v" onclick="this.classList.toggle('clicked')">
        <div class="front">
            Front Content
        </div>
        <div class="back">
            Back Content
        </div>
    </div>

Upvotes: 2

gilly3
gilly3

Reputation: 91657

Your code is using the :hover css pseudo-class to trigger the animation. To switch to using clicks, use a real class instead, and toggle that class on and off using JavaScript.

Change all instances of .flipdiv.v:hover in your css to .flipdiv.v.showBack. Then, create a click handler to toggle the class on the div.

onload = function(){
  document.querySelector(".flipdiv.v").onclick = flipdivClicked;
};
function flipdivClicked(e) {
  if (/\bshowBack\b/.test(this.className)) {
    this.className = this.className.replace(/ ?\bshowBack\b/g, "");
  }
  else {
    this.className += " showBack";
  }
}
.flipdiv {
  position: relative;
  width: 220px;
  height: 160px;
  perspective: 500px;
}

.flipdiv.v.showBack .front, .flipdiv.v.flip .front {
  transform: rotateX(180deg);
}

.flipdiv.v.showBack .back, .flipdiv.v.flip .back {
  transform: rotateX(0deg);
}

.flipdiv.v .back {
  transform: rotateX(-180deg);
}


.flipdiv .front, .flipdiv .back {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  color: white;
  background-color: #000;
  padding: 10px;
  backface-visibility: hidden;
}
<div class="flipdiv v">
  <div class="front">
    Front Content
  </div>
  <div class="back">
    Back Content
  </div>
</div>

Upvotes: 3

Related Questions