CODEWITHSUNDEEP
jqueryhtmlcssonclickrotation
Annie The Cross
Annie The Cross

Reputation: 183

Jquery Image transform not working as expected?

I try to use transform image (arrow up and down) with jQuery.

It turn upside down but not back when I click again.

HTML

<div class="question">          
      <h3>Headline</h3>
        <p>Paragraph</p>
  <span></span>
      </div>

JS

$('.question').click(function () {
        $(this).find('span').css("transform", "rotateX(180deg)");
    });

JSfiddle

Upvotes: 0

Views: 89

Answers (1)

Michael Homm&#233;
Michael Homm&#233;

Reputation: 1726

You're adding the property over and over so it's not going to work. Instead, you could check if the property exists and add or remove it.

For example:

$('.question').click(function() {
   var arrow = $(this).find('span');

   if (arrow.css("transform") == "none") {
     arrow.css("transform", "rotateX(180deg)");
   } else {
     arrow.css("transform", "none");
   }

 });

Here's a fiddle

Upvotes: 3

Related Questions