Michael Neas Michael Neas - 6 months ago 17
Javascript Question

Show nonunique div class on button click jquery

I want to show the div class of .unhideme on a button press. This class is dynamically generated so there are multiple divs with the same class name. Using JQuery how do I show this block correctly?

<div id="negativeButtons">
<div class="unhideme" name="unhideme" style="display:none">
<h3>Comments</h3>
<textarea name="unhappymanager" id="unhappymanager"></textarea>
</div>
<input type="submit" class="excused" name="negativexcused" value="Excused">
<input type="button" class="unexcused" name="unexcused" value="Unexcused">
<input type="submit" class="commentpushDB" name="commentpushDB" style="display:none" value="Submit">
</div>


Here I have jquery which works for the other buttons but I can't seem to find a function that will show the div.

$(document).ready(function() {
$(".unexcused").click(function() {
$(this).closest(".unhideme").show();
$(this).closest(".unexcused").hide();
$(this).prev(".excused").hide();
$(this).next(".commentpushDB").show();
});
});

Jai Jai
Answer

Instead you have to use .siblings() method:

$(".unexcused").click(function() {
  $(this).siblings(".unhideme").show();
  $(this).siblings(".unexcused").hide(); // <---- ?? why hide the buttons.
  $(this).prev(".excused").hide();
  $(this).next(".commentpushDB").show();
});

It's because the buttons and the div are siblings not parents.