I am currently facing a challenge with my "In-Place Editing" feature implementation. I need to dynamically retrieve the ID of two divs within one li element. The first div is visible by default, while the second div is initially set to display: none. When the pen icon (span) is clicked, I aim to toggle between the visibility of these divs - setting the first div to display: none and the second div to display: block. Below is the jQuery code I have so far:
$('.edit-tools').each(function () {
var pen = this;
$(pen).click(function () {
var div_id_first = $(this).closest(".school").attr('id');
var div_id_second = $(".school-edit").attr('id');
console.log(div_id_first);
console.log(div_id_second);
$('#' + div_id_first).css("display", "none");
$('#' + div_id_second).css("display", "block");
$('.edit-tools').attr("disabled", true);
});
});
UPDATE: The issue lies in retrieving the ID of the second div due to its placement outside the current scope. As the pen (span) is located within the first div, closest() method resolves the first div's ID successfully.
The primary concern remains on how to access the ID of the second div,
<li>
<div id="09990-view"></div>
<div id="09990-edit" style="display: none;"></div>
<li>
To view the jsfiddle example, click here: http://jsfiddle.net/tF6nD/3/