Arrow animation when click event

JavaScript
1

I try to animate arrow or triangle when user click on link. This is just an example.

Please find the following code:

<a class="" data-toggle="collapse" data-target="#myID">Contact Us<span class="icon-down"></span></a>

I have put before and CSS:

ul.mymenu1 .icon-down:before
{
 font-family: 'icomoon';
}

Can be achieved with the Javascript and animate icon from down to up and opposite?

<span class="icon-down"></span>

into

<span class="icon-up"></span>

and Javascript:

jQuery(document).ready(function()
 {
  jQuery('.mymenu1').click(function()
   {
    if(jQuery(this).hasClass('icon-down')) {
     jQuery(this).removeClass('icon-down');
    }else {
     jQuery(this).addClass('icon-up');
    }

   }
  );
 }
);
2

Hi @toplisek, the animation itself could actually be done with CSS alone using rotate() with a transition – then you only need to toggle a class with JS to apply the rotation. Here’s a pen:

3 Likes
3

Thank you for the support. It is easier.

1 Like
4

I have tested again your proposal. As you modify link using button, is it possible not to use a button styling but a link. It is an issue as you have one integrated button but I tried to manage using LI which contains a LI element but also SPAN. So, double elements. Please find my HTML code. I have tried but I could not manage as only arrow will be rotated if I click on this element but we have also a link called Contact Us which is an integrated part including an arrow.

<ul class="mymenu1">
 <li class=""><a class="" data-toggle="collapse" data-target="#">Contact Us<span class="arrow-down"></span></li>
</ul>
5

Are you doing something else dynamically when you click ‘Contact’? (such as opening another panel).

If this is a bootstrap hide and show then you will already have a dynamic class (open) added to the parent and you can use this class to animate the arrow.

6

Yes, it is integral part of link with an arrow.ContactUs

7

Then you probably just need the CSS that you were given and add the dynamic bootstrap class in front of your arrow rules.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.