Bender Bender - 2 months ago 5
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


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:

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


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(){

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