javascript change class on click, keep css animations

Question

So I'm in need of a bit of help. I have an issue that requires javascript/css combination.

I have the menu setup. As you can see, the arrows animate on hover, which is not what I want in this case.

I want the arrows/css to animate on click. So I'm not sure on how to do this, if I should use .hasClass in js and switch it on click. Also, how would I be able to define which menu item is opened (defined by class, instead of defined in js).

After clicking, I want the arrow to remain how it should after animating (i.e. open menu has arrow up, closed menu has arrow down).

Would I have to change the js alot or would it just be minimal edits.

$(document).ready(function() {
    // Collapse everything but the first menu:
    $("#VerColMenu > li > a").not(":first").find("+ ul").slideUp(1);
    // Expand or collapse:
    $("#VerColMenu > li > a").click(function() {
        $(this).find("+ ul").slideToggle("fast");
    });
});

Any help would be great.

Please start using the "Tidy Up" button on jsfiddle. It makes your code beautiful. — Chandranshu
– Chandranshu, Commented Nov 16, 2013 at 21:42
That's alright. BTW, I have provided you the code to keep the arrow the way it should remain after animating. Do you also want to retain the current on-hover animation? — Chandranshu
– Chandranshu, Commented Nov 16, 2013 at 21:54

Chandranshu · Accepted Answer · 2013-11-16 22:10:23Z

1

Here is the solution to the second part of your question: http://jsfiddle.net/R7f2K/3/

Your HTML has been updated to change:

<i class="fa fa-angle-down vnavright"></i>

to

<i class="vnavright fa fa-angle-down"></i>

I have added this line to your JS code:

$(this).find("[class^='vnavright']").toggleClass('fa-angle-down fa-angle-up');

The CSS rules have been modified to use #VerColMenu li a [class^="vnavright"].

While things are working as you had desired, I find the animation to be confusing.

edited Nov 16, 2013 at 22:10

answered Nov 16, 2013 at 21:51

Chandranshu

3,6693 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Peter Over a year ago

Thanks. Would it still be possible to include the css animation in that? Or would that be something more dificult to implement?

Chandranshu Over a year ago

Totally possible. We just have to use a different selector.

Peter Over a year ago

So something like creating a seperate class for angle up and angle down both with the css animation

Chandranshu Over a year ago

See the updated answer. You should accept this by clicking on the checkmark next to the answer.

Peter Over a year ago

I've accepted this, thanks for your help. It all seems how I'd like it to be aside from the animations. Is it possible to trigger the animation onClick (i.e. only when you click the menu item)?

|

elreimundo · Accepted Answer · 2013-11-16 22:05:24Z

0

In the original HTML, you'll also probably want to change that first arrow's class to fa-angle-up :

    <ul id="VerColMenu">
        <li><a class="top-vnav">General <i class="fa fa-angle-up vnavright"></i></a>
...

answered Nov 16, 2013 at 22:05

elreimundo

6,2961 gold badge16 silver badges6 bronze badges

1 Comment

Peter Over a year ago

Thanks, I figured as much.

Collectives™ on Stack Overflow

javascript change class on click, keep css animations

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related