Toggle Class does not work by the way you think

.ClassA
{        
  color : green;
}

.ClassB
{
  color : red;
}
 $('document').ready(function(){
   $('.ClassA').on('click', function(){
      alert($(this).attr('class'));
      $(this).toggleClass('ClassB')
   }); 
 });
<div>Class A</div>
<div>Class B</div>

After the first Time ClassA is Applied When you click ClassA both ClassA and ClassB will be applied to the same tag.

The alert message will display output some thing link ClassA ClassB

Leave a reply