Is there a way to revert the icons back to their original state when clicked again, without losing any of the current functionalities?
When an icon is clicked for the first time, it rotates 180 degrees.
The icon rotates back if another icon is clicked or if the click is outside the icon.
In addition to these features, I would like to introduce a new feature where clicking on an already rotated icon will spin it back to its original position.
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>