Trying to toggle between two icons

Question

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

$( ".upArrow" ).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.

Answer 1

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);

Answer 2

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'});
});