Auto-Collapse Long Comments

add_filter( 'comment_text', function( $comment_content ) {

	$max_length = 100; // Set the maximum length of the comment to display without collapsing

	if ( strlen( $comment_content ) > $max_length ) {

		$short_content = substr( $comment_content, 0, $max_length ) . '...';

		$full_content = esc_html( $comment_content );

		$comment_content = '<div class="collapsed-comment">' . esc_html( $short_content ) . ' <a href="#" class="read-more">Read more</a></div>';

		$comment_content .= '<div class="full-comment" style="display:none;">' . $full_content . ' <a href="#" class="read-less">Read less</a></div>';

	}

	return $comment_content;

} );

add_action('wp_footer', function() {

	echo '<script type="text/javascript">

        document.addEventListener("DOMContentLoaded", function() {

            var readMoreLinks = document.querySelectorAll(".read-more");

            var readLessLinks = document.querySelectorAll(".read-less");

            readMoreLinks.forEach(function(link) {

                link.addEventListener("click", function(e) {

                    e.preventDefault();

                    link.parentElement.style.display = "none";

                    link.parentElement.nextElementSibling.style.display = "block";

                });

            });

            readLessLinks.forEach(function(link) {

                link.addEventListener("click", function(e) {

                    e.preventDefault();

                    link.parentElement.style.display = "none";

                    link.parentElement.previousElementSibling.style.display = "block";

                });

            });

        });

    </script>';

} );