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?

2
  • 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, 2016 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, 2016 at 16:56

3 Answers 3

0

Check your javascript console for errors.

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

1
  • I checked on Chrome and I don't have any errors in my console.
    – kiarashi
    Jul 1, 2016 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.

4
  • Thank you, you answer helps. :) There one more thing in which I've updated my first post.
    – kiarashi
    Jul 1, 2016 at 13:49
  • Try using slideUp and slideDown instead of slideToggle.
    – NateWr
    Jul 3, 2016 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, 2016 at 20:51
  • Found a way. :) Although I ran into another issue, I'll create a different question for that. Thanks.
    – kiarashi
    Jul 5, 2016 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 and acknowledge that you have read and understand our privacy policy and code of conduct.

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