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>
<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>
</div>
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") {
toggleDivs(field_id);
}
...
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.