How can I conditionally set a div's class in jQuery?

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");
});