How to rotate a child of an element when we click the element?

Question

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

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

Reyno · Accepted Answer · 2020-06-17T13:16:01.553

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);
}

edited Jun 17 '20 at 13:16

answered Jun 17 '20 at 12:49

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

How to rotate a child of an element when we click the element?

1 Answers1