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?
wp_nonce_field
and other extrainput 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. :)