Question

I am using jquery UI button with its icon. I want to toggle the icon of the button onclick, its working but icons are overriding :

/* initialize the button at document.ready event */
$("#buttonid"). button({ icons: { primary: 'ui-icon-play'} });

/* binding event */
$("#buttonid").toggle(
function () { 
  /* code */ 
  $(this).button({ icons: { primary: 'ui-icon-play'} }); }, 
function () { 
  /* code */ 
  $(this).button({ icons: { primary: 'ui-icon-pause'} }); 
});

Can anybody point out the problem?

Answer 1

You are able to change the icon by changing the class associated with it, no need for additional interaction.

See this working Fiddle example!

jQuery

$(function() {
    $("#buttonid").button({
        icons: {
            primary: "ui-icon-play"
        }
    }).hover(function () {
        // hover in
        $(".ui-button-icon-primary", this)
          .toggleClass("ui-icon-pause ui-icon-play");
    }, function () {
        // hover out
        $(".ui-button-icon-primary", this)
          .toggleClass("ui-icon-play ui-icon-pause");
    });
});

Since what you need is only to change the icon, and the icon is present at the style sheet with an specific class, you only need to toggle the class on over in/out, thus changing:

.ui-icon-play to .ui-icon-pause and vice-versa.

See: jQuery toggleClass

See: jQuery UI icon classes (hover the icon to see the class name)