miksham miksham - 1 month ago 21
CSS Question

Rotate Image Icon On Click

Was wondering if someone can help me with this. I want to be able to click the text/icon, and on click, the + icon rotates 45 degrees to look like a x icon. Upon second click, the icon rotates back to look like a + icon, and so on.

Any help will be greatly appreciated!

JSFIDDLE

https://jsfiddle.net/d264kt2t/

HTML

<div class="container">

<div class="pointer">
CLICK ME<img src="http://www.ssglobalsupply.com/images/plus.png" class="coolImage">
</div>

</div>


CSS

.container{
width:100%;
padding-top:100px;
padding-bottom:100px;
background-color:#000;

}

.coolImage{
height:17px;
width:17px;
margin-left:7px;
}

.pointer{
cursor:pointer;
text-align:center;
font-size:20px;
color:#fff;
}

Answer

I updated your Fiddle with this script:

var rotated = false;
$(".pointer").click(function() {
  if (!rotated) {
    $(this).find("img").css({
      "transform": "rotate(45deg)"
    });
  } else {
    $(this).find("img").css({
      "transform": "rotate(0deg)"
    });
  }
  // Toggle the flag
  rotated = !rotated;
});

Notice That I also added the jQuery lib in the external ressources".