Truncating and revealing text – Adds a `Read More` and `Read less` patterns in a Single Page using Oxygen's Code Block

oxygen-post-content-truncating-and-revealing-content.php

<!-- 
Truncating and revealing text – The Show More and Read More patterns
Customized by GDN from source https://justmarkup.com/articles/2017-01-12-truncating-and-revealing-text-the-show-more-and-read-more-patterns
-->


<!-- Add this to the Code Block > HTML Section -->
<article>
  <?php
  	$content = get_the_content(); 
  	$number_of_characters = 1000; // change this to adjust length  
  	if (strlen($content) <= $number_of_characters) {
      echo $content; 
    } else {
  	  echo nl2br(mb_strimwidth($content, 0, $number_of_characters, " ", "UTF-8"));
	  echo '<span id="more-2" class="fulltext">'. nl2br(mb_strimwidth(get_the_content(), $number_of_characters, 10000, "...", "UTF-8")) .'</span><a aria-expanded="false" aria-controls="more-2" class="toggle-content" hidden><span class="text show_more"> + Show More</span> <span class="visually-hidden"></span></a>';
    }
  ?>
</article>


<!-- this sections goes into the Code Block > CSS (without the style guides) -->
<style>
	.visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
a:hover .visually-hidden,
a:focus .visually-hidden{
  position: relative;
  margin: 0;
}
[hidden] {
  display: none;
}
.show_more { cursor: pointer; }
</style>


<!-- This sections goes into the Code Block > JavasScript (without the <script> tags) -->
<script>
	jQuery(document).ready(function( $ ) {
			var $toggleButtons = $('.toggle-content');
			var $fullTextWrappers = $('.fulltext');
			var fullText;
			var toggleButtonText;
			
			$fullTextWrappers.attr('hidden', true);

			$toggleButtons.removeAttr('hidden');

			// add listener for each button
			$toggleButtons.each(function () {

				$(this).on('click', function () {

					fullTextWrapper = $(this).parent().find('.fulltext');
					toggleButtonText = $(this).find('.text');

					console.log(fullTextWrapper);

					// change attributes and text if full text is shown/hidden
					if (!fullTextWrapper.attr('hidden')) {
						toggleButtonText.text('Show More');
						fullTextWrapper.attr('hidden', true);
						$(this).attr('aria-expanded', false);
					} else {
						toggleButtonText.text(' - Show Less');
						fullTextWrapper.removeAttr('hidden');
						$(this).attr('aria-expanded', true);
					}
				});
			});
});
	
</script>