Dynamically change contents and switch buttons - toggle

Question

I have a form that I want to switch its mode and also corresponding buttons. Basically, when users open the page first, they see the form which cannot be edited. There is an "Edit" button as well. When they click the button two things will happen: 1. The form will be editable. 2. "Edit" button is hidden and another two buttons show up which are "Save" and "Cancel".
The code I have now is close but not working the way as I mentioned above. Any idea how to fix it?
html:
<div class="eq-height widget grid_4 container flat rounded-sm bspace" id="Div5">
<header class="widgetheader">
<h2>Contact</h2>
</header>
<input type="submit" value="Edit" class="edit edit-one-button btn lg bold ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" style="border-style:Solid;"/>
<input type="submit" value="Save" class="save edit-one-button btn lg bold ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" style="border-style:Solid;"/>
<input type="submit" value="Cancel" class="cancel edit-one-button btn lg bold ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" style="border-style:Solid;"/>
<fieldset id="Fieldset1" class="content form-fields">
<div class="inner tspace clearfix">
<ul id="contact" class="alpha">
<li class="contactinfo">
<label class="contactinfo grid_12">
Rebekah Becker</label>
</li></ul>
</div>
</fieldset>
<fieldset id="Fieldset6" style="display:none"
class="content form-fields">
<div class="inner tspace clearfix">
<ul id="Ul1" class="alpha">
<li class="contactinfo">
<label class="contactinfo grid_4">
First Name:</label>
<input type="text" trim="true" maxlength="250" value="Rebekah" class="profile-field grid_4">
</li></ul>
<div class="clear-both"></div>
</div>
</fieldset>
</div>
css:
.save, .cancel
{
display:none;
}
javascript:
/*script to toggle the form mode*/
<script type="text/javascript">
var divheight;
$(".edit-one-button").click(function () {
var btnname = $(this).val();
if (btnname == 'Edit') {
divheight = $('.widget').attr('style');
$(this).closest('.widget').removeAttr('style');
$(this).nextUntil('.edit-one-button').toggle();
}
else {
$(this).nextUntil('.edit-one-button').toggle();
$(this).closest('.widget').attr('style', divheight);
}
});
</script>
/*script to switch the buttons*/
<script type="text/javascript">
$('.edit').click(function () {
$(this).hide();
$(this).siblings('.save, .cancel').show();
});
$('.cancel').click(function() {
$(this).siblings('.edit').show();
$(this).siblings('.save').hide();
$(this).hide();
});
$('.save').click(function() {
$(this).siblings('.edit').show();
$(this).siblings('.cancel').hide();
$(this).hide();
});
</script>

Answer 1

this is to do the exact thing as you said in top.
$(document).ready(function(){
$("#edit").click(function(){
$('#Fieldset1').hide();
$('#Fieldset6').show();
$('#edit').hide();
$('#save').show();
$('#cancel').show();
});
});
</script>
if you want me to do the rest of the cancel and save please let me know :)