Add/Removing Class not working in IE

.toggle(
  function() { 
      hiddenElements.show();
      $(this).text('Collapse');
      $(".accToggler").removeClass().addClass("accToggler2");
  }, 
  function() { 
      hiddenElements.hide();
      $(this).text(showCaption);
      $(".accToggler2").removeClass().addClass("accToggler");
  }
)

Once the original .accToggler button is clicked the toggle function doesn't seem to be working. The classes are not being added/removed to the button.

I changed it to this:

                      .toggle(
                          function() { 
                              hiddenElements.show();
                              $(this).text('Collapse');
                              $("#accTogg").removeClass("accToggler").addClass("accToggler2");
                          }, 
                          function() { 
                              hiddenElements.hide();
                              $(this).text(showCaption);
                              $("#accTogg").removeClass("accToggler2").addClass("accToggler");
                          }
                      )

And still nothing.. should definitely be working now right?

              $('.v65-productDisplay').append(
                  $('<tr><td><div class="accToggler" style="font-weight:bold;" id="accTogg">' + showCaption + '</div></td></tr>')
                      .toggle(
                          function() { 
                              hiddenElements.show();
                              $(this).text('Collapse');
                              $("#accTogg")开发者_开发问答.removeClass("accToggler").addClass("accToggler2");
                          }, 
                          function() { 
                              hiddenElements.hide();
                              $(this).text(showCaption);
                              $("#accTogg").removeClass("accToggler2").addClass("accToggler");
                          }
                      )
              );

That's the entire code, sorry.

$(this).text('Collapse');

Is replacing the entire div so it doesn't even exist anymore =/ How can I get it to just replace the text inside of the div?

---

That should work. Take a lookat this jsFiddle which is a very simple version of what you're trying to do. Are there any JavaScript errors being thrown?

---

/**
    * Method that checks whether cls is present in element object.
    * @param  {Object} ele DOM element which needs to be checked
    * @param  {Object} cls Classname is tested
    * @return {Boolean} True if cls is present, false otherwise.
*/
function hasClass(ele, cls) {
  return ele.getAttribute('class').indexOf(cls) > -1;
}

/**
    * Method that adds a class to given element.
    * @param  {Object} ele DOM element where class needs to be added
    * @param  {Object} cls Classname which is to be added
    * @return {null} nothing is returned.
*/
function addClass(ele, cls) {
   if (ele.classList) {
     ele.classList.add(cls);
   } else if (!hasClass(ele, cls)) {
    ele.setAttribute('class', ele.getAttribute('class') + ' ' + cls);
  }
}

/**
  * Method that does a check to ensure that class is removed from element.
  * @param  {Object} ele DOM element where class needs to be removed
  * @param  {Object} cls Classname which is to be removed
  * @return {null} Null nothing is returned.
*/
function removeClass(ele, cls) {
  if (ele.classList) {
    ele.classList.remove(cls);
  } else if (hasClass(ele, cls)) {
    ele.setAttribute('class', ele.getAttribute('class').replace(cls, ' '));
 }
}

---

try this

$("li").toggle(
  function() { 
      //hiddenElements.show();
      $(this).text("Collapse");
      setTimeout(function () {
        $(".accToggler").removeClass().addClass("accToggler2");
      }, 1);
  }, 
  function() { 
      //hiddenElements.hide();
      $(this).text("NotCollapse");
      setTimeout(function () {
        $(".accToggler2").removeClass().addClass("accToggler");
      }, 1);
  }
)

.accToggler
{
  color:green;
}

.accToggler2
{
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
  <li class="accToggler">NotCollapsed</li>
</ul>