CODEWITHSUNDEEP
jquery
chipit24
chipit24

Reputation: 6987

jQuery how to show hidden reply form?

I have my HTML set up in the following way:

<section class="comment-block">
    <div class="comment-title">
        ...
        <button class="reply_btn">Reply</button>
        ...                                                                             
    </div>

    <p class="comment">Test comment</p>

    <form method="POST" action="/org/post/{comment_id}" class="reply-form">
        <input name="_method" type="hidden" value="PUT">
        <textarea name="body" cols="50" rows="10"></textarea>
        <div class="button-group">
            <input type="submit" value="Post comment">
            <button type="button">Cancel</button>
        </div>
    </form>                                 
</section>

Using jQuery, I want the Reply button (reply_btn) to change the CSS for the form (reply-form) from display: none to display: block.

There are multiple comments, so the jQuery click function attached to reply_btn must select the closest reply-form relative to itself.

I tried this (and a few other variations), but it doesn't work:

$('.comment-block').on('click', '.reply_btn', function () {
    $(this).children('.reply-form').css('display', 'block');
});

I then need the cancel button to change the display back to none.

The CSS for the form:

.comment-block .reply-form
{
   ...
   display: none;
}

Upvotes: 0

Views: 1351

Answers (4)

Jai
Jai

Reputation: 74738

change to this:

$(this).parent().siblings('.reply-form').css('display', 'block');

or

$(this).parent().siblings('.reply-form').show();

In your code you were trying to search that .reply-form as a child of button which is not the case.

Infact .reply-form is the sibling of the button's parent.

I think better is to use .closest() with .find():

$(this).closest('.comment-block').find('.reply-form').show();

Upvotes: 5

epascarello
epascarello

Reputation: 207511

You are looking for siblings of the button with the class. That is not what you want.

Your code is:

$(this).children('.reply-form').css('display', 'block');

and it says:

$(this) <-- the button that was clicked
       .children('.reply-form')  <-- you are looking at children of the button

Now to fix the problem, you need to look at what was clicked on, traverse up to the container and look for the form. If you add a class to the reset button, you can do both things in one block. 

$('.comment-block').on('click', '.reply_btn, .reset', function () {
    var show = $(this).is(".reply_btn");
    $(this).closest(".comment-block").find("form").toggle(show);
});

JSFiddle

Upvotes: 0

JCOC611
JCOC611

Reputation: 19729

You could similarly use .parent() twice in order to achieve the same results:

$(".reply_btn").click(function () {
  $(this).parent().parent().children('.reply-form').show();
});

I changed some of your HTML and added the close button functionality:

<section class="comment-block">
    <div class="comment-title">
        ...
        <button class="reply_btn">Reply</button>
        ...                                                                             
    </div>

    <p class="comment">Test comment</p>

    <form method="POST" action="/org/post/{comment_id}" class="reply-form">
        <input name="_method" type="hidden" value="PUT"></input>
        <textarea name="body" cols="50" rows="10"></textarea>
        <div class="button-group">
            <input type="submit" value="Post Comment">Post comment</input>
            <input type="button" class="cancel_btn" value="Cancel"></input>
        </div>
    </form>                          
</section>

And this:

$(".cancel_btn").click(function(){
  $(this).parent().parent().hide();
});

Working jsFiddle example here.

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

If the form element is hidden, the following code can be used to show by clicking the button:

$(function() {
    $('.comment-block').on('click', '.reply_btn', function () {
        $(this).closest( '.comment-block' ).find('.reply-form').show();
    });
});

Upvotes: 0

Related Questions