Whenever a button is clicked, the following need to be performed:
- All siblings of the clicked button get toggled
- All
edit_button
get toggled, except for theedit_button
within the same span as the clicked button (note: the excludededit_button
can be the same as the clicked button)
The JavaScript is working in the way I want it to, but I am curious if there's another better way to achieve the second requirement.
Note: save_button
and cancel_button
are hidden when first loaded.
$(function() {
$('.edit_button, .save_button, .cancel_button').click(function() {
$(this).toggle();
$(this).siblings('button').toggle();
$('div#personal_info').find('button.edit_button').not($(this).parent().find('button.edit_button')).toggle();
});
});
<div id="personal_info">
<div id="section_1">
<span><button class="edit_button">Edit</button><button class="cancel_button">Cancel</button><button class="save_button">Save Changes</button></span>
</div>
<div id="section_2">
<span><button class="edit_button">Edit</button><button class="cancel_button">Cancel</button><button class="save_button">Save Changes</button></span>
</div>
<div id="section_3">
<span><button class="edit_button">Edit</button><button class="cancel_button">Cancel</button><button class="save_button">Save Changes</button></span>
</div>
</div>