Bender Bender - 3 months ago 10
CSS Question

Make arrow in button point down after menu slides out

I have a button that has an arrow appended to it when a user hovers over it. When clicked, a content div slides out in its wrapper using

jQuery.slideToggle()
.

Once the div slides out, I want to make the arrow in the button rotate 180 degrees to signify that pressing it will make the content div go down if clicked again.

I made a JsFiddle to show what I have so far: https://jsfiddle.net/414mwv17/

What would be the best way to make the arrow point down after the button is clicked?

Answer

Create a new class for how you want the carat to appear :

#makeGroupButton span.rotate:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  transform: rotate(135deg);
}

Note the class addition in the selector.

Then change the javascript/jQuery to just toggle that class:

 $('#makeGroupButton').bind('click', function(){
     $('#slideout').slideToggle(500);
     $(this).children('span').toggleClass('rotate');
  });

You can't directly select the :after and :before pseudo selectors with jQuery, so just changing the class, and adding CSS is customarily the easiest method.

Updated fiddle