jQuery toggleClass to rotate 180° doesn't work

Question

I'm trying to make an image ( img tag ) rotate 180° when it's clicked.

 $(document).off('click', '.taxonomie').on('click', '.taxonomie', function (e) { $(".chevron-occasion").toggleClass("flip"); });

 .mon-plateau-de-fromages .form-plateau-fromage .chevron-occasion { -moz-transition: transform 1s; -webkit-transition: transform 1s; transition: transform 1s; } .flip { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-12 b-gold taxonomie occasion"> <p class="number-left">1</p> <div> <p class="titre-taxonomie">Par occasion</p> <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/icons/chevron.png" alt="chevron occasion" class="chevron-occasion"> </div> <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/icons/calendar.png" alt="calendar occasion" class="img-occasion"> </div>

So at first the "flip" class was added and removed on click. Then I removed the argument " e " in the function, just in case a miracle would make it work, but it didn't.

The image I need to rotate is the first, called "chevron-occasion", why doesn't it work ?

Thanks !

Answer 1

If I understood your problem correctly. Here is the solution http://jsfiddle.net/xpvt214o/924105/

try this css

.flip {
  animation: animate 4s ease-in-out;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

@keyframes animate{
  0%{
    transform: rotate(0deg)
  }
  100%{
    transform: rotate(180deg)
  }
}

Also in your above code the argument 'e' does not have any functionality. So, removing the argument won't have any effect.