CODEWITHSUNDEEP
javascripthtmlcss
Alexey Ayzin
Alexey Ayzin

Reputation: 209

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?

Upvotes: 0

Views: 68

Answers (1)

Newboy
Newboy

Reputation: 57

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)";
  }
}

Upvotes: 1

Related Questions