onclick checkbox , hide a div and show another div

I havent actually done any code for 开发者_开发问答this, was searching on internet and found this article:

http://iamzed.com/jquery/showhidediv.html

Was thinking, for our purposes...

Part of a form we are making, normal display. is like this:

And checking the checkbox, hides the above div and shows this div..

I tried to emulate what I saw in the pictures in fiddle. It's not styled but it has the functionality you are looking for.

Assuming you have proper html structure, that everything you want to hide is in div with id yourOldContent and what you want to show is in div with id yourDivWithNewContent (which is initially hidden with display: none;), and the checkbox has id checkboxId, you can use following code:

 $('#checkboxId').click(function(){
  $('#yourDivWithNewContent').toggle();
  $('yourOldContent').toggle();
});

$("#checkbox").click(function(){
   if ($(this).is(':checked')){
      $("#box1").show();
      $("#button_feature").show();
      $("#button_normal").hide();
   }
   else{
      $("#box1").hide();
      $("#button_feature").hide();
      $("#button_normal").show();
   }
});