The arrow is not flipping in accordion

[codeispoetry]

The arrow is not flipping 180 degree as I was expecting them to do.

related code is:

HTML →

<svg class="Icon-image rotate" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 16c-.3 0-.5-.1-.7-.3l-6-6 1.4-1.4 5.3 5.3 5.3-5.3 1.4 1.4-6 6c-.2.2-.4.3-.7.3z"></path>
</svg>

CSS →

`.rotate{
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}
.rotate.down{
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}`

JS →

  $(".rotate").click(function(){
    $(this).toggleClass("down"); 
});

[PaulOB]

$this doesn’t refer to the svg but the parent.

You could do this:

//Original version spelt accordion accordian?

/*jQuery time*/
$(document).ready(function() {
  $("#accordion i").click(function() {
    //slide up all the link lists
    $("#accordion ul ul").slideUp(200);
    $("#accordion i").removeClass("down");
    //slide down the link list below the h3 clicked - only if its closed
    if (
      !$(this)
        .next()
        .is(":visible")
    ) {
      $(this)
        .next()
        .slideDown(200);
      $(this).addClass("down");
    }
  });
});

and then this:

.rotate{
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}
.down .rotate{
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

[codeispoetry]

Hi there @PaulOB sir, I have also used →

    transition: all -2s linear;

to make the transition faster, and it works. I hope “-2s” is technically acceptable too (negative).

[Mittineague]

@codeispoetry

I hope “-2s” is technically acceptable too (negative).

Best to not hope. Much better to look for documentation (bolding mine)

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration

<time>

Is a <time> denoting the amount of time the transition from the old value of a property to the new value should take. A time of 0s indicates that no transition will happen, that is the switch between the two states will be instantaneous. A negative value for the time renders the declaration invalid.

[codeispoetry]

@Mittineague

A negative value for the time renders the declaration invalid.

Thanks.

This means that in our case → This is not even needed →

.rotate{
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}

[PaulOB]

@codeispoetry

transition: all 2s linear;

You want a transition otherwise users get no clue it’s changed so use .3s for a better effect (dont forget the point).

[codeispoetry]

@PaulOB

dont forget the point

Yes, Thanks. Got the point.