在jQuery中按下更改更改状态图标

Question

I have having trouble trying to figure out how to change my toggle state when it is pressed. I am using SVG icons that are triggered by CSS and they are being called in my query scrip by .addclass. Once the toggle is pressed it would like it the icon to change to a different class that will display a different icon.

Here is my script

 var state = false;

 $("#toggleslideButton").click(function () {
        if (!state) {
              $('#secondaryPanel').animate({width: "toggle"}, 1000);
              $('#toggleslideButton').addClass( "icon icon-exclamation" );

        state = true;
           }
        else {
              $('#secondaryPanel').animate({width: "toggle"}, 1000);
              $('#toggleslideButton').addClass( "icon icon-close" );

        state = false;
           }
 });

My HTML

  <aside id="secondaryPanel">
        <section id="portalInformation">test</section>
  </aside>
  <div id="control"><a href="#" id="toggleslideButton" class="icon icon-close"><span>View</span></a></div>

The icons will not display properly because the font are being used on my local machine. But what I am trying to do is when the menu is open i would like the toggle button to display the icon for its class icon-close. Then once the toggle is pressed and the menu slides back it I would like the toggle icon to read the class icon-exclamtion. What am I doing wrong that it will not change?

Answer 1

jQuery has a built in function for this: .toggleClass .

$("#toggleslideButton").click(function () {
    $('#secondaryPanel').animate({width: "toggle"}, 1000);
    $('#toggleslideButton').toggleClass( "icon-close icon-exclamation" );
});