jquery, toggle css content (arrow up and down)

Question

I use jquery to toggle an element. the button that i use is styled with css.
I want to change the content, from \\25BC (arrow down) to \\25B2 (arrow up), based on the state of the toggled element ( $(#categories ul) ).
How should it be done?

the code:

   a#categories-toggle:after{
      content: "\25BC";
   }

   $().ready(function(){
      $("#categories-toggle").on('click', function(eve){
         eve.preventDefault(); 
         $("#categories ul").toggle();
      });
   });

Answer 1

CSS:

a#categories-toggle.down:after{
  content: "\25BC";
}
a#categories-toggle:after{
  content: "\25B2";
}

HTML:

<a id="categories-toggle" href="#">foo</a>

jQuery:

$("#categories-toggle").on('click', function(eve){
     eve.preventDefault(); 
     $(this).toggleClass("down");
  });

Answer 2

Have you tried $('a#categories-toggle').css('content', '\\25B2'); ?

Answer 3

a#categories-toggle.up:after{
      content: "\25BC";
   }
a#categories-toggle.down:after{
      content: "\25B2";
   }

 $().ready(function(){
      $("#categories-toggle").on('click', function(eve){
         eve.preventDefault(); 
         $("#categories ul").toggleClass(up down);
      });
   });

ToggleClass can switch between space seperated classes.