Search code examples
javascriptjquerycsstogglethemeroller

Trying to toggle between two icons

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.

Solution

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