How to add (read more) to Text Block in Additional Info

To add (read more) to Text Block in Additional Info, like this.

#1. First, use this code to Store Page Header Injection

<!-- @tuanphan - Product text read more -->
<script>
const DESCRIPTION_SELECTOR = '.ProductItem-additional .html-block';

document.addEventListener('DOMContentLoaded', function() {
  const blocks = document.querySelectorAll(DESCRIPTION_SELECTOR);
  
  blocks.forEach(block => {
    const htmlContent = block.querySelector('.sqs-html-content');
    if (!htmlContent) return;
    
    const readMoreLink = htmlContent.querySelector('a[href="#readmore"]');
    if (!readMoreLink) return;
    
    const fullContent = htmlContent.innerHTML;
    
    const truncatedContent = fullContent.replace(
      /<a[^>]*href="#readmore"[^>]*>.*?<\/a>/gi,
      '<span class="read-more-btn">(read more)</span>'
    );
    
    htmlContent.setAttribute('data-full-content', fullContent);
    htmlContent.setAttribute('data-truncated-content', truncatedContent);
    htmlContent.setAttribute('data-is-truncated', 'true');
    
    htmlContent.innerHTML = truncatedContent;
    
    attachReadMoreEvent(htmlContent);
  });
  
  function attachReadMoreEvent(htmlContent) {
    const readMoreBtn = htmlContent.querySelector('.read-more-btn');
    if (readMoreBtn) {
      readMoreBtn.addEventListener('click', function() {
        toggleContent(htmlContent);
      });
    }
  }
  
  function attachReadLessEvent(htmlContent) {
    const readLessBtn = htmlContent.querySelector('.read-less-btn');
    if (readLessBtn) {
      readLessBtn.addEventListener('click', function(e) {
        e.preventDefault();
        toggleContent(htmlContent);
      });
    }
  }
  
  function toggleContent(htmlContent) {
    const isTruncated = htmlContent.getAttribute('data-is-truncated') === 'true';
    
    if (isTruncated) {
      let fullContent = htmlContent.getAttribute('data-full-content');
      
      fullContent = fullContent.replace(
        /<a[^>]*href="#readmore"[^>]*>(.*?)<\/a>/gi,
        '$1 <span class="read-less-btn">(read less)</span>'
      );
      
      htmlContent.innerHTML = fullContent;
      htmlContent.setAttribute('data-is-truncated', 'false');
      attachReadLessEvent(htmlContent);
    } else {
      const truncatedContent = htmlContent.getAttribute('data-truncated-content');
      htmlContent.innerHTML = truncatedContent;
      htmlContent.setAttribute('data-is-truncated', 'true');
      attachReadMoreEvent(htmlContent);
    }
  }
});
</script>

<style>
.read-more-btn, .read-less-btn {
    color: #0073e6;
    cursor: pointer;
    transition: color 0.3s ease;
    font-weight: 500;
}
.read-more-btn:hover, .read-less-btn:hover {
    color: #005bb5;
    text-decoration: underline;
}
.read-less-btn {
    margin-left: 5px;
}
</style>

#2. Next, edit text in Additional Info > Highlight text > Enter link: #readmore

#3. You can change read more read less style here.