dream hunter dream hunter - 8 days ago 4
CSS Question

I want to spin icon into it's old state when click it again

I want to spin the icons in to it's old state when click on the icons again without losing current features.
current features:


  1. icon will rotate 180 degree on first click on corresponding icon.

  2. icon will rotate back on click either on other icon or outside.



with this features I want to add a new feature ,ie, the icon need to be spin back when we click it again.



function rotate(e){
resetRotation();
document.getElementById("me").className="spinner in fa fa-caret-down";
e.stopPropagation();
}

function resetRotation(){
document.getElementById("me").className="spinner out fa fa-caret-down";
document.getElementById("you").className="spinner out fa fa-caret-down";
}

function rotatea(e){
resetRotation();
document.getElementById("you").className="spinner in fa fa-caret-down";
e.stopPropagation();
}

document.addEventListener('click', resetRotation);

.spinner {
transition: all 0.5s linear;
}

.spinner.in{
transform: rotate(180deg);
}
.spinner.out{
transform: rotate(0deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<i onclick="rotate(event)" id="me" class="spinner fa fa-caret-down "></i>
<i onclick="rotatea(event)" id="you" class="spinner fa fa-caret-down"></i>




Answer

Check you already added the in class to your i tag to rotate back and exit the function. To check element already has a class use the following code,

document.querySelector("#you").classList.contains("in")

function rotate(e) {
  // Check is already rotated and return
  if (document.querySelector("#me").classList.contains("in")) {
    resetRotation();
    return;
  }
  resetRotation();
  document.getElementById("me").className = "spinner in fa fa-caret-down";
  e.stopPropagation();
}

function resetRotation() {
  document.getElementById("me").className = "spinner out fa fa-caret-down";
  document.getElementById("you").className = "spinner out fa fa-caret-down";
}

function rotatea(e) {
  // Check is already rotated and return
  if (document.querySelector("#you").classList.contains("in")) {
    resetRotation();
    return;
  }
  resetRotation();
  document.getElementById("you").className = "spinner in fa fa-caret-down";
  e.stopPropagation();
}

document.addEventListener('click', resetRotation);
.spinner {
  transition: all 0.5s linear;
}
.spinner.in {
  transform: rotate(180deg);
}
.spinner.out {
  transform: rotate(0deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div style="padding:20px;">
  <i onclick="rotate(event)" id="me" class="spinner fa fa-caret-down "></i>
  <i onclick="rotatea(event)" id="you" class="spinner fa fa-caret-down"></i>
</div>