javascript - I want to spin the icons currectly on click on corresponding icon -


in html code have tried rotate icon 180 degree on click on corresponding icon , return when click on other icon or outside.the problem here that first icon not return when click on second , second not return either click on first icon or click on outside.i want fix it. how can fix problem?.

function rotate(e){    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.addeventlistener('click', resetrotation);  function rotatea(e){    document.getelementbyid("you").classname="spinner in fa fa-caret-down";    e.stoppropagation();  }
.spinner {    transition: 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>

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: 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>


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -