0

My html looks like this (simplified)

$args = array(...);

$comments_query = new WP_Comment_Query;
$comments       = $comments_query->query( $args );  

foreach ($comments as $comment) { 

    <a class="respond-to-messages" href="#<?php echo $comment->comment_ID; ?>">Reply to message</a>

        <div id="comment-<?php echo $comment->comment_ID; ?>" class="comment-respond-form post-id-<?php echo $comment->comment_post_ID; ?>">
            <table>
                <tr>
                    <form id="custom_comments-form" action="" method="post">

                        //form fields

                        <button class="uk-button" type="submit">Send</button>
                    </form>
                </tr>
            </table>
            </div> 

}

enter image description here

My jquery

jQuery(function ($) {   
    $(document).ready(function(){

        $(".comment-respond-form").hide();
        $(".respond-to-messages").show();

        $('.respond-to-messages').on('click',function(){            
            $(this).text($(this).text() == 'Reply to message' ? 'Hide form' : 'Reply to message');          

            $(".comment-respond-form").slideToggle(function(){
                if($('.comment-respond-form').height() > 0) {
                    $('html, body').animate({
                        scrollTop: $("comment-respond-form").offset().top
                    }, 1000);
                }
            });
        });

    });
}); 

Because we're in a loop with multiple comments, .comment-respond-form should actually be comment-<?php echo $comment->comment_ID; ?> But the jquery script is added outside the loop (in the footer and inside a .js file).

Any help is much appreciated.

EDIT: (we're almost there)

I created an extra button to expand/collapse all forms

<button class="collapse-forms" href="#">Collapse All</button>

$('.collapse-forms').on('click',function(){         
            $(this).text($(this).text() == 'Collapse All' ? 'Expand All' : 'Collapse All');             

            $(".comment-respond-form").slideToggle(function(){


            });
        });

But what I noticed is the following

enter image description here

How to modify my code so that all forms will open/close regardless whether they were closed or open before?

  • Maybe I'm misunderstanding but isn't what you're trying to do exactly what WP's comment-reply.js already does? – Cai Jun 28 '16 at 13:48
  • The plugin I use, uses a custom form. Along with wp_nonce_field and other extra input hidden fields, so I tend to change as little as possible. But I'll take your advice to heart and try to look more into a custom comment form and the reply link. :) – kiarashi Jun 28 '16 at 16:56
0

Check your javascript console for errors.

You can't use $ in WordPress. Replace it with jQuery everywhere but jQuery(function ($).

  • I checked on Chrome and I don't have any errors in my console. – kiarashi Jul 1 '16 at 13:50
0

I believe you're asking how to call .slideToggle() only on the commenting form specific to each comment. Is that correct?

If so, you can use the .next() function in jQuery to get the element immediately following the link that was clicked.

var $reply_form = $(this).next();
$reply_form.slideToggle(function(){
    if($reply_form.height() > 0) {
        $('html, body').animate({
            scrollTop: $reply_form.offset().top
        }, 1000);
    }
});

This requires that your HTML code look exactly as you describe it, with the .comment-respond-form immediately following .respond-to-messages.

  • Thank you, you answer helps. :) There one more thing in which I've updated my first post. – kiarashi Jul 1 '16 at 13:49
  • Try using slideUp and slideDown instead of slideToggle. – NateWr Jul 3 '16 at 8:27
  • Could you make an example on how to use both slideDown/Up? I'm kind of new to Jquery. – kiarashi Jul 4 '16 at 20:51
  • Found a way. :) Although I ran into another issue, I'll create a different question for that. Thanks. – kiarashi Jul 5 '16 at 12:45
0

Please add the id attribute in anchor tag please see this working code with jQuery..

foreach ($comments as $comment) {

<a class="respond-to-messages" id="<?php echo $comment->comment_ID; ?>" href="#<?php echo $comment->comment_ID; ?>">Reply to message</a>

    <div id="comment-<?php echo $comment->comment_ID; ?>" class="comment-respond-form post-id-<?php echo $comment->comment_post_ID; ?>">
        <table>
            <tr>
                <form id="custom_comments-form" action="" method="post">

                    //form fields

                    <button class="uk-button" type="submit">Send</button>
                </form>
            </tr>
        </table>
        </div> 
} 


jQuery('.respond-to-messages').click(function(){ 

  jQuery(".comment-respond-form").hide();

  var current_id = this.id;

  jQuery('#comment-'+current_id).slideDown();

});

I hope this will help you

Please see example of your code https://jsfiddle.net/Ni3singhchouhan/q08vvq3v/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.