0

I have a span tag in a tag to show a chevron after a text I'd like to rotate only the span once I click the a tag and to rotate back if the a tag hasn't the class "collapsed" (cause if it does it means it is closed)

rotatearrow() {
    $(document).ready(() => {
        if ($('a.collapse').hasClass("collapsed")) {
            $('a.collapse').click().firstChild("i.fa-chevron-left").rotate(90);
        }else {
            $('a.collapse').click().firstChild("i.fa-chevron-left").rotate(-90);
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
    <li>
        <a class="collapsed collapse active" data-target="#TPs" data-toggle="collapse">
            <i class="fas fa-file-word"></i>
            <span class="nav-label">TP</span>
            <span class="fa fa-chevron-left float-right"></span>
        </a>
    </li>
</ul>

EDIT: I created a snippet using the original project FIDDLE

lolozen
  • 386
  • 1
  • 4
  • 19
  • Your JS is not valid - why have document.ready inside a function? Also click().firstChild smells like wishful thinking. Please consult the documentation. Where do you get the `.rotate()` from? A plugin? Please update the snippet I made you if you need a plugin – mplungjan Jun 17 '20 at 12:50
  • it is inside a function because I'm working with angular and putting it inside a component.ts function – lolozen Jun 17 '20 at 12:59
  • That is of course missing info. Perhaps make a [mcve] – mplungjan Jun 17 '20 at 12:59
  • 1
    `.click().firstChild(` is still not valid jQuery - perhaps you mean `$('a.collapse').on("click",function() { $(this).find(".fa-chevron-left").rotate($(this).is(".collapsed")?90:-90); })` asuming you have a rotate function somewhere – mplungjan Jun 17 '20 at 13:13

1 Answers1

1

You can easily achieve this with a bit of css. With the transition property you can tweak the animation to your needs.

.collapse span.fa-chevron-left {
    transform: rotate(90deg);
    transition: transform 0.25s ease-in-out;
}

.collapse.collapsed span.fa-chevron-left {
    transform: rotate(0deg);
}
Reyno
  • 6,119
  • 18
  • 27
  • @lolozemadnessgamer Be aware that i am using `i.fa-chevron-left`. Your html has a span, you could try to replace the `i.fa-chevron-left` with `span.fa-chevron-left`. Ill also update the snippet above – Reyno Jun 17 '20 at 13:01
  • it worked adding span and a "s" to transform ^^ tranform -> transform – lolozen Jun 17 '20 at 13:15
  • A yes good catch, ill add the S to the snippet as well – Reyno Jun 17 '20 at 13:16