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

/

HTML

<div class="container">

<div class="pointer">
CLICK ME<img src=".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;
}

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/d264kt2t/

HTML

<div class="container">

<div class="pointer">
CLICK ME<img src="http://www.ssglobalsupply./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;
}

• javascript
• jquery
• html
• css

• @milksham I have added below the cross-browser working sample. Click "Run code snippet" to try this – Aruna Commented Oct 19, 2016 at 0:09
• @theonlygusti He seems to be lazy to look at anyone's code. He accepted whoever updated his fiddle rather than accepting good answer and pressing up vote for all good answers. Very bad :-( – Aruna Commented Oct 19, 2016 at 0:40

5 Answers 5

Succinct with a beautiful animation

Personally, I disliked Louys' overly verbose and uninteresting solution.

Here, with jQuery at our disposal we can create something so much more beautiful:

rotated = false;
$('.pointer').click(function(){
  elem = this;
  
  $({rotation: 225*rotated}).animate({rotation: 225*!rotated}, {
    duration: 500,
    step: function(now) {
      $(elem).css({'transform' : 'rotate('+ now +'deg)'});
    }
  });
  rotated=!rotated;
});

See the JSFiddle or the snippet:

i = 1;
$('.pointer').click(function(){
  elem = $(this).children("img")[0];
  
  $({rotation: 225*!i}).animate({rotation: 225*i}, {
    duration: 500,
    step: function(now) {
      $(elem).css({'transform' : 'rotate('+ now +'deg)'});
    }
  });
  i=!i;
});

.container{
  width:100%;
  padding-top:100px;
  padding-bottom:100px;
  background-color:#000;
  text-align:center;
  font-size:20px;
  color:#fff;
}

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

.pointer{
  cursor:pointer;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<div class="pointer">
CLICK ME<img src="https://i.sstatic/Tgf0C.png" class="coolImage">
</div>

</div>

We jQuery#animate a "fake" object to be able to generate the smooth animation. You can change the duration to something else if you want to speed or slow the animation.

rotated is used as a stand-in variable to provide the toggle functionality.

Please ask if further clarification is needed.

Define a rotated class in you css, then toggle the class on clicks, for example like:

var pointers = document.getElementsByClassName('pointer');
for(var i = 0; i < pointers.length; i++){
	pointers[i].addEventListener('click', function(event) {
  	event.target.getElementsByClassName('coolImage')[0].classList.toggle('rotated');
  });
}

.container{
  width:100%;
  padding-top:100px;
  padding-bottom:100px;
  background-color:#000;
  text-align:center;
  font-size:20px;
  color:#fff;
}

.coolImage{
  height:17px;
  width:17px;
  margin-left:7px;
  transform:rotate(45)
}

.pointer{
  cursor:pointer;
}

.rotated {
  transform: rotate(45deg);
}

<div class="container">

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

</div>

Here you go with a cross-browser working example:

function rotate() {
   var elm = document.getElementById('imgToRotate');
   var className = elm.className;
   if(className.indexOf('rotate') === -1) {
      elm.className = elm.className + ' rotate';
   } else {
      elm.className = elm.className.replace(' rotate', '');
   }
}

.container{
  width:100%;
  padding-top:100px;
  padding-bottom:100px;
  background-color:#000;
  text-align:center;
  font-size:20px;
  color:#fff;
}

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

.pointer{
  cursor:pointer;
}

.rotate {
  transform:rotate(45deg);
  /* Firefox */
    -moz-transform:rotate(45deg);
    /* Safari and Chrome */
    -webkit-transform:rotate(45deg);
    /* Opera */
    -o-transform:rotate(45deg);
    /* IE9 */
    -ms-transform:rotate(45deg);
    /* IE6,IE7 */
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; 
}

<div class="container">

<div class="pointer" onclick="rotate()">
CLICK ME<img src="http://www.ssglobalsupply./images/plus.png" class="coolImage" id="imgToRotate">
</div>

</div>

JSFiddle https://jsfiddle/balasuar/jcwg1h71/

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".

Insert this code into the <img> tag:

onclick="this.style['-webkit-transform'] = 'rotate(' + 45 + 'deg)';"