WordPress Excerpt with Show More / Show Less Toggle

/**
 * Display an excerpt with Show More / Show Less functionality.
 *
 * Usage:
 * echo wpfolks_excerpt_toggle( get_the_excerpt(), 20 );
 */

function wpfolks_excerpt_toggle( $text, $word_limit = 20 ) {

	$text = wp_strip_all_tags( $text );
	$words = preg_split( '/s+/', trim( $text ) );

	if ( count( $words ) <= $word_limit ) {
		return esc_html( $text );
	}

	$short_text = implode(
		' ',
		array_slice( $words, 0, $word_limit )
	);

	$unique_id = wp_unique_id( 'wpfolks-excerpt-' );

	return sprintf(
		'<span class="wpfolks-excerpt-wrapper">
			<span class="wpfolks-excerpt-short">%1$s...</span>
			<span id="%2$s" class="wpfolks-excerpt-full" hidden>%3$s</span>
			<a href="#" onclick="
				event.preventDefault();
				const wrapper = this.parentNode;
				wrapper.querySelector('.wpfolks-excerpt-short').hidden = true;
				wrapper.querySelector('.wpfolks-excerpt-full').hidden = false;
				this.hidden = true;
				wrapper.querySelector('.wpfolks-show-less').hidden = false;
			">%4$s</a>
			<a href="#" class="wpfolks-show-less" hidden onclick="
				event.preventDefault();
				const wrapper = this.parentNode;
				wrapper.querySelector('.wpfolks-excerpt-short').hidden = false;
				wrapper.querySelector('.wpfolks-excerpt-full').hidden = true;
				this.hidden = true;
				wrapper.querySelector('.wpfolks-show-more').hidden = false;
			">%5$s</a>
		</span>',
		esc_html( $short_text ),
		esc_attr( $unique_id ),
		esc_html( $text ),
		sprintf(
			'<span class="wpfolks-show-more">%s</span>',
			esc_html__( 'Show More', 'textdomain' )
		),
		esc_html__( 'Show Less', 'textdomain' )
	);
}