Switching Button icon using onClick event

[Kevin]

Hi There,

 i have the following code. I'm wanitng the icon of the button to change eveytime you click the button deppening if the panel has expaneded or not. ("pin" and "unpin").

$("#button").kendoButton({
      icon: "pin",
      click: function (e) {
        $('.UserFavouritesPanel').animate({ width: 'toggle' }, 350);

if ($('.UserFavouritesPanel').width()>1) {
          $("#button").kendoButton({
            icon: "unpin"
          });
        } else {
          $(".UserFavouritesViewBtn").kendoButton({
            icon: "pin"
          });
        }
      }
    });

 The issue im having is that on the fist click the icon changes to the correct one but after that when you click the button it never changes again until you refresh the screen. Any ideas on why this happens.

[Daniel]

Hello Kevin,

You can achieve this by dynamically adding/removing the k-i-pin and k-i-unpin classes e.g.

$("#button").kendoButton({
  icon: "pin",
  click: function (e) {
        $('.UserFavouritesPanel').animate({ width: 'toggle' }, 350);
        var icon = this.element.children(".k-icon");
        if ($('.UserFavouritesPanel').width()>1) {
            icon.removeClass("k-i-pin");
            icon.addClass("k-i-unpin");
        } else {
            icon.removeClass("k-i-unpin");
            icon.addClass("k-i-pin");
        }
    }
});

The problem will occur with the code that you provided because when initializing a new button, the previous icon class will not be removed. 

Regards,
Daniel
Telerik

[Kevin]

Hi Daniel,

Thank you, makes alot of sense. I will give it a bash.

Regards,

Kevin