Show More / Show Less + Button Inside showHide__txt

functions.php

<style>
.showHide__txt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.showHide__btn {
  text-decoration-thickness: 2px !important;
  text-underline-offset: 2px !important;
}
.showHide__btn {
  letter-spacing: -0.48px;
  line-height: 1.4;
  font-size: var(--text-s);
  color: var(--text-body);
  text-decoration: underline;
  background: transparent;
}
.showHide__btn:hover {
  text-decoration: none;
}
</style>

<script>
  // Target only the text elements with the class '.showHide__txt'
  var showHideTexts = document.querySelectorAll('.showHide__txt');
  showHideTexts.forEach(function(showHideText) {
    var textContent = showHideText.textContent.trim();
    var charLimit = 252; // Define the character count limit
    if (textContent.length > charLimit) {
      // Get the initial truncated text up to the character limit
      var initialText = textContent.slice(0, charLimit) + '...';
      var showHideBtn = document.createElement('button');
      showHideBtn.textContent = 'show more';
      showHideBtn.classList.add('showHide__btn');
      // Hide text initially
      showHideText.textContent = initialText;
      showHideBtn.addEventListener('click', function() {
        if (showHideText.classList.contains('expanded')) {
          showHideText.textContent = initialText;
          showHideText.classList.remove('expanded');
          showHideBtn.textContent = 'show more';
        } else {
          showHideText.textContent = textContent;
          showHideText.classList.add('expanded');
          showHideBtn.textContent = 'show less';
        }
      });
      // Append the button after the text content
      showHideText.parentNode.appendChild(showHideBtn);
    }
  });
</script>