How to display and hide fields by clicking button

I have a database of questions & answers and I made it so you can just click a “Add a category” or “Edit question” button and it will make some form inputs appear. I’m new to JQuery so I think I’m doing it in a roundabout, bad way. Heres the HTML code for one of the fields:

		<div class="field_wrapper" id="question_25_wrapper_s1">
		<img class="question_diagram" src="img/question_diagrams/2011_q1a_q3.png">
		<center><button href="#" class="edit_field" data-action="edit" data-field_name="question" data-item_id="25">Edit Question</button>
		 <div class="field_wrapper" id="question_25_wrapper_s2" style="display:none;"><textarea id="data_field_question_25" cols="120" rows="20">[diagram=2011_q1a_q3.png]</textarea><br>
		<button class="edit_field" data-action="update" data-field_name="question" data-item_id="25">Update</button>

and heres the javascript:

	$(".edit_field").click(function() {

		function toggleDivs(field_id) {
			$("#" + field_id + "_wrapper_s1").hide();
			$("#" + field_id + "_wrapper_s2").show();
		var action = $(this).data('action');
		var item_id = $(this).data('item_id');
		var field_name = $(this).data('field_name');
		var field_id = field_name + "_" + item_id
		if (action == "edit") {

So basically I’m adding a unique ID to each div tag, and s1 is the div thats displayed before you click the button, s2 gets displayed after you click the edit button. I’ve got a lot of these widgets on my site now and its getting messy. Can anyone recommend a simpler way to hide and display fields like this. Like for example, if I could link all these div tags to the button, so that I don’t have to keep doing [B]var field_id = field_name + "" + item_id[/B] to select the div tags and don’t have to add a unique ID to every div tag.