Trying to toggle between two icons

I initiate two buttons (I'm using the JQuery built in CSS themeroller):

$( ".u开发者_Go百科pArrow" ).button({ icons: {secondary:'ui-icon-circle-arrow-n'} });
$( ".downArrow" ).button({ icons: {secondary:'ui-icon-circle-arrow-s'} });

I want to be able to toggle between these two icons when clicking the same button, and somehow switch between the .upArrow class and .downArrow class. I'm not sure how. I'd appreciate any help.

Since you're working with jQuery UI buttons, you can change the icon option with the toggle() function.

$('#button').toggle(function(){
    $(this).button('option', 'icons', {secondary:'ui-icon-circle-arrow-n'});
}, function(){
    $(this).button('option', 'icons', {secondary:'ui-icon-circle-arrow-s'});
});

You can use the .toggleClass() method of jQuery. You don't necessarily need to take away the other class, just use CSS to your advantage to override the other class' settings:

$('#foo').toggleClass(className, addOrRemove);