How to Show/Hide upon Button OnClick? JavaScript or CSS.

Hi,
I have Two text boxes which are hide when it's in a list. After Clicking Edit, I would like to show the text boxes visible.
From the below code when I say the text box "visible" it displays accordingly. But I need to show the text boxes when it's in a edit mode.
Please help me how to visible/show when i click the button.
- show the text boxes after i click the "Edit" button
- hide the text boxes after I click the "save" button.
Thanks for reading and help would be great.
@model IEnumerable<NameList>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
function ShowEdit(par) {
$("#divBDate-" + par).attr("class", "hide");
$("#txtBDate-" + par).attr("class", "visible");
$("#divEDate-" + par).attr("class", "hide");
$("#txtEDate-" + par).attr("class", "visible");
$("#btnEdit-" + par).attr("class", "hide");
$("#btnSave-" + par).attr("class", "visible");
}

function SaveEdit(par) {
$("#divBDate-" + par).attr("class", "visible");
$("#txtBDate-" + par).attr("class", "hide");
$("#divEDate-" + par).attr("class", "visible");
$("#txtEDate-" + par).attr("class", "hide");
$("#btnEdit-" + par).attr("class", "visible");
$("#btnSave-" + par).attr("class", "hide");

var -bDate = $("#txtBDate-" + par).val();
var -dDate = $("#txtEDate-" + par).val();
var url = '@Url.Action("GetUser", "Cust")';
$.post(url, { RoleId: par, userId: -userId, startDate: -startDate },
function (data) {
$("#divResult").html(data);
});
}
</script>



<div id=divResult">
<table class="table">
<tr>
<th>Name</th>
<th>Area</th>
<th>Beginning Date</th>
<th>End Date</th>
</tr>

@foreach (NamesList n in Model)
{
<tr>
<td> @n.Name </td>
<td>@n.Area </td>
<td>
<div id="divBDate-@n.ID" class="visible">@n.BDate</div>
<input id="txtBDate-@n.ID type=" text" class="hide" value=@n.BDate />
</td>
<td>
<div id="divEndDate-@n.ID" class="visible">@n.EndDate</div>
<input id="txtEndDate-@n.ID type=" text" class="hide" value=@n.EndDate />
</td>
<td>
<button id="btnEdit-@n.ID" class="visible" onclick="ShowEdit(@n.ID); return false;">Edit</button>
<button id="btnSave-@n.ID" class="hide" onclick="SaveEdit(@n.ID); return false;">Save</button>
</td>

</tr>
}
</table>
</div>