Tuesday, 20 August 2013

How to use jQuery to show a form for a specific div

How to use jQuery to show a form for a specific div

I am using jQuery to show and hide the edit options for each post. Here is
the jQuery that I am using:
$(document).ready(function () {
$(".post-menu").click(function () {
$(".menu-options ul").toggle();
});
$(".edit-option").click(function () {
$("#edit-post").show();
$(".menu-options ul").toggle();
});
$("#never-mind").click(function () {
$("#edit-post").hide();
});
})
Slight introduction about code: the post-menu is the div which handles the
show hide events, edit-options is the <ul> that has to popup containing
edit and delete as <li> in it, the #edit-post is the div for a textarea,
submit button (which uses ajax jquery; no need to have a form), and
#never-mind is a button to close it.
The div code is:
<div class="post-menu">
<div style="width: 20px; height: 8px;" >Options</div>
<div class="menu-options">
<ul>
<li class="edit-option">Edit</li>
<li class="delete-option">Delete</li>
</ul>
</div>
</div> // I missed this while writing the question, sorry for that!
<div style="display: none;" id="edit-post">
<textarea id="new-post-message">@row.Message</textarea>
<br>
<button onclick="updatepost(@row.PostId)">Save</button>
<button id="never-mind">Never mind</button>
<div class="error-post"></div>
</div>
Desired Behavior: Show the options panel only for the selected post.
Current Behavior: The problem is that it unhides the option panel for
every post when I just want to show the options panel the selected post.
What am I doing wrong?

No comments:

Post a Comment