Question

CSS:

   #outer{     background-color:#FFFF99;                }     #inner1{       float : left;    }      .New1{       width: 62%;      }     .New2{      width: 72%     } 

---

I need to be able to change the class of a div after a condition in an event handler.

Logic:

         case '1': <div id="outer" class="New1">                     </div>          case '2': <div id="outer" class="New2">                     </div> 

---

To do this, I wrote the following jQuery:

$("#generate").click(function(){      // here I wrote code for case '1'      $("#outer").addClass("New1"); }); $("#choice").click(function(){      // here I wrote code for case '2'      $("#outer").addClass("New2"); });  

• Do I need to remove the class that I previously added to it?

• I need to toggle between two states.

How can I do this?

Answer 1

$('#generate').toggle(function() {     $('#outer').removeClass('New2').addClass('New1'); }, function() {     $('#outer').removeClass('New1').addClass('New2'); }); 

or

$('#generate').click(function() {     $('#outer').removeClass('New2').addClass('New1'); }); $('#choice').click(function() {     $('#outer').removeClass('New1').addClass('New2'); });