modify walker_comment to show/hide comment_text - wordpress

Question

I'm trying to show / hide the comment_text under the comment_meta for a custom post type, editing the walker_class of the twenty twenty theme (child).
I succeeded in doing it with javascript but it works only on the first comment!
What's wrong?
Either trying to pass the comment_id like the div_id, it doesn't work at all.
It's about 2days I've spent round here!
<?php
/**
* Custom comment walker for this theme.
*
* #package WordPress
* #subpackage Twenty_Twenty
* #since 1.0.0
*/
if ( ! class_exists( 'TwentyTwenty_Walker_Comment' ) ) {
/**
* CUSTOM COMMENT WALKER
* A custom walker for comments, based on the walker in Twenty Nineteen.
*/
class TwentyTwenty_Walker_Comment extends Walker_Comment {
/**
* Outputs a comment in the HTML5 format.
*
* #see wp_list_comments()
* #see https://developer.wordpress.org/reference/functions/get_comment_author_url/
* #see https://developer.wordpress.org/reference/functions/get_comment_author/
* #see https://developer.wordpress.org/reference/functions/get_avatar/
* #see https://developer.wordpress.org/reference/functions/get_comment_reply_link/
* #see https://developer.wordpress.org/reference/functions/get_edit_comment_link/
*
* #param WP_Comment $comment Comment to display.
* #param int $depth Depth of the current comment.
* #param array $args An array of arguments.
*/
protected function html5_comment( $comment, $depth, $args ) {
$tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
?>
<<?php echo $tag; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $this->has_children ? 'parent' : '', $comment ); ?>>
<article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard" onclick="showDiv()" >
<?php
$comment_author_url = get_comment_author_url( $comment );
$comment_author = get_comment_author( $comment );
$avatar = get_avatar( $comment, $args['avatar_size'] );
$comme = get_comment_text( $comment );
$id_com = get_comment_id( $comment );
if ( 0 !== $args['avatar_size'] ) {
if ( empty( $comment_author_url ) ) {
echo wp_kses_post( $avatar );
} else {
printf( '<a href="%s" rel="external nofollow" class="url">', $comment_author_url ); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --Escaped in https://developer.wordpress.org/reference/functions/get_comment_author_url/
echo wp_kses_post( $avatar );
}
}
printf(
'<span class="fn">%1$s</span><span class="screen-reader-text says">%2$s</span>',
esc_html( $comment_author ),
__( 'says:', 'twentytwenty' )
);
if ( ! empty( $comment_author_url ) ) {
echo '</a>';
}
?>
</div><!-- .comment-author -->
<div class="comment-metadata">
<a href="<?php echo esc_url( get_comment_link( $comment, $args ) ); ?>">
<?php
/* Translators: 1 = comment date, 2 = comment time */
$comment_timestamp = sprintf( __( '%1$s at %2$s', 'twentytwenty' ), get_comment_date( '', $comment ), get_comment_time() );
?>
<time datetime="<?php comment_time( 'c' ); ?>" title="<?php echo esc_attr( $comment_timestamp ); ?>">
<?php echo esc_html( $comment_timestamp ); ?>
</time>
</a>
<?php
if ( get_edit_comment_link() ) {
echo ' <span aria-hidden="true">•</span> <a class="comment-edit-link" href="' . esc_url( get_edit_comment_link() ) . '">' . __( 'Edit', 'twentytwenty' ) . '</a>';
}
?>
</div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<!--- <div class="comment-content entry-content"> -->
<div class="comment-content entry-content" id="<?php echo $id_com ;?>" >
<?php
echo $comme;
if ( '0' === $comment->comment_approved ) {
?>
<p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'twentytwenty' ); ?></p>
<?php
}
?></div>
<script type='text/javascript'>
function showDiv() {
var id_com = <?php echo $id_com ;?>; //retrieving the id
if (document.getElementById(id_com).style.display == 'none') {
document.getElementById(id_com).style.display = 'block';
} else {
document.getElementById(id_com).style.display = 'none';
}
}
</script>
<!-- </div><!-- .comment-content -->
<?php
$comment_reply_link = get_comment_reply_link(
array_merge(
$args,
array(
'add_below' => 'div-comment',
'depth' => $depth,
'max_depth' => $args['max_depth'],
'before' => '<span class="comment-reply">',
'after' => '</span>',
)
)
);
$by_post_author = twentytwenty_is_comment_by_post_author( $comment );
if ( $comment_reply_link || $by_post_author ) {
?>
<footer class="comment-footer-meta">
<?php
if ( $comment_reply_link ) {
echo $comment_reply_link; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --Link is escaped in https://developer.wordpress.org/reference/functions/get_comment_reply_link/
}
if ( $by_post_author ) {
echo '<span class="by-post-author">' . __( 'By Post Author', 'twentytwenty' ) . '</span>';
}
?>
</footer>
<?php
;}
?>
</article><!-- .comment-body -->
<?php
}
}
}

Answer 1

I succeed in solving the problem:
the javascript function needed to have a different name for each comment, same for the container to hide/show
That's the code:
<?php
/**
* Custom comment walker for this theme.
*
* #package WordPress
* #subpackage Twenty_Twenty
* #since 1.0.0
*/
if ( ! class_exists( 'TwentyTwenty_Walker_Comment' ) ) {
/**
* CUSTOM COMMENT WALKER
* A custom walker for comments, based on the walker in Twenty Nineteen.
*/
class TwentyTwenty_Walker_Comment extends Walker_Comment {
/**
* Outputs a comment in the HTML5 format.
*
* #see wp_list_comments()
* #see https://developer.wordpress.org/reference/functions/get_comment_author_url/
* #see https://developer.wordpress.org/reference/functions/get_comment_author/
* #see https://developer.wordpress.org/reference/functions/get_avatar/
* #see https://developer.wordpress.org/reference/functions/get_comment_reply_link/
* #see https://developer.wordpress.org/reference/functions/get_edit_comment_link/
*
* #param WP_Comment $comment Comment to display.
* #param int $depth Depth of the current comment.
* #param array $args An array of arguments.
*/
protected function html5_comment( $comment, $depth, $args ) {
$tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
?>
<<?php echo $tag; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $this->has_children ? 'parent' : '', $comment ); ?>>
<article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard" onclick="showDiv<?php echo get_comment_id(); ?>()" >
<?php
$comment_author_url = get_comment_author_url( $comment );
$comment_author = get_comment_author( $comment );
$avatar = get_avatar( $comment, $args['avatar_size'] );
$comme = get_comment_text( $comment );
$id_com = get_comment_id( $comment );
if ( 0 !== $args['avatar_size'] ) {
if ( empty( $comment_author_url ) ) {
echo wp_kses_post( $avatar );
} else {
printf( '<a href="%s" rel="external nofollow" class="url">', $comment_author_url ); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --Escaped in https://developer.wordpress.org/reference/functions/get_comment_author_url/
echo wp_kses_post( $avatar );
}
}
printf(
'<span class="fn">%1$s</span><span class="screen-reader-text says">%2$s</span>',
esc_html( $comment_author ),
__( 'says:', 'twentytwenty' )
);
if ( ! empty( $comment_author_url ) ) {
echo '</a>';
}
?>
</div><!-- .comment-author -->
<div class="comment-metadata">
<a href="<?php echo esc_url( get_comment_link( $comment, $args ) ); ?>">
<?php
/* Translators: 1 = comment date, 2 = comment time */
$comment_timestamp = sprintf( __( '%1$s at %2$s', 'twentytwenty' ), get_comment_date( '', $comment ), get_comment_time() );
?>
<time datetime="<?php comment_time( 'c' ); ?>" title="<?php echo esc_attr( $comment_timestamp ); ?>">
<?php echo esc_html( $comment_timestamp ); ?>
</time>
</a>
<?php
if ( get_edit_comment_link() ) {
echo ' <span aria-hidden="true">•</span> <a class="comment-edit-link" href="' . esc_url( get_edit_comment_link() ) . '">' . __( 'Edit', 'twentytwenty' ) . '</a>';
}
?>
</div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div id="<?php echo get_comment_id(); ?>" style=display:none>
<div class="comment-content entry-content">
<?php
echo $comme;
if ( '0' === $comment->comment_approved ) {
?>
<p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'twentytwenty' ); ?></p>
<?php
}
?></div>
<?php
$comment_reply_link = get_comment_reply_link(
array_merge(
$args,
array(
'add_below' => 'div-comment',
'depth' => $depth,
'max_depth' => $args['max_depth'],
'before' => '<span class="comment-reply">',
'after' => '</span>',
)
)
);
$by_post_author = twentytwenty_is_comment_by_post_author( $comment );
if ( $comment_reply_link || $by_post_author ) {
?>
<footer class="comment-footer-meta">
<?php
if ( $comment_reply_link ) {
echo $comment_reply_link; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --Link is escaped in https://developer.wordpress.org/reference/functions/get_comment_reply_link/
}
if ( $by_post_author ) {
echo '<span class="by-post-author">' . __( 'By Post Author', 'twentytwenty' ) . '</span>';
}
?>
</footer>
<?php
;}
?>
<script type='text/javascript'>
function showDiv<?php echo get_comment_id(); ?>() {
var id_com = <?php echo $id_com ;?>; //retrieving the id
if (document.getElementById(id_com).style.display == 'none') {
document.getElementById(id_com).style.display = 'block';
} else {
document.getElementById(id_com).style.display = 'none';
}
}
</script>
</div><!-- il mio div -->
</article><!-- .comment-body -->
<?php
}
}
}