Jquery script with comments ID's

Question

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> 

}

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

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

Answer 1

Check your javascript console for errors.

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

Answer 2

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.

Answer 3

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/