Alexey Ayzin Alexey Ayzin - 6 months ago 27
CSS Question

Flip Two Divs Separately with One JS Function

Currently I have two divs flipping with two separate functions as shown:

<div class="flip-container" id="flip-container">
<div class="flipper" id="flipper">
<div class="front" id="front">
<p>
Paragraph 1
</p>
<p>
Paragraph 2
</p></br>
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper()">&#xf112;</span>
</div>
<div class="back" id="back">
<p>
Paragraph 1
</p>
<p>
Paragraph 2
</p>
<p>
Paragraph 3
</p></br>
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper()">&#xf112;</span>
</div>
</div>
</div>
<div class="flip-container" id="flip-container">
<div class="flipper" id="flipper2">
<div class="front" id="front">
<p>
Paragraph 1
</p>
<p>
Paragraph 2
</p>
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper2()">&#xf112;</span>
</div>
<div class="back" id="back">

<p>
Paragraph 1
</p>
<p>
Paragraph 2
</p>
<p>
Paragraph 3
</p>
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper2()">&#xf112;</span>
</div>
</div>
</div>


Then here are my functions:

function flipper(){
if(document.getElementById("flipper").style.transform == "rotateY(180deg)"){
document.getElementById("flipper").style.transform = "rotateY(0deg)";
}else{
document.getElementById("flipper").style.transform = "rotateY(180deg)";
}
}
function flipper2(){
if(document.getElementById("flipper2").style.transform == "rotateY(180deg)"){
document.getElementById("flipper2").style.transform = "rotateY(0deg)";
}else{
document.getElementById("flipper2").style.transform = "rotateY(180deg)";
}
}


Now. I want to combine the two javascript functions into one. This will help me simplify my code. Here is a link to my code: https://secure.scheduleinterpreter.com/bestinterpreters/wip/dashboard/ada/Dashboard/dashboard.003.html

Another question: How do I set up a minimum width for the screen to lock the size of divs and start stacking them on top of one another?

Answer

Have you tried to pass the id of the DIV as argument ?

function flipper(divId){
  if(document.getElementById(divId).style.transform == "rotateY(180deg)") {
    document.getElementById(divId).style.transform = "rotateY(0deg)";
  } else {
    document.getElementById(divId).style.transform = "rotateY(180deg)";
  }
}