read more/less, alpine js, for magento 2 hyva themes

readmore.phtml

<div class="mb-4 leading-relaxed product-description prose" 
     x-data="{ isCollapsed: false, maxLength: 420, originalContent: '', content: '' }" 
     x-init="originalContent = $el.firstElementChild.textContent.trim(); content = originalContent.slice(0, maxLength) + '...'">
    <p x-text="isCollapsed ? originalContent : content" class="m-0">
        <?= /* @noEscape */ $shortDescription ?>
    </p>
    <a class="inline-flex font-black underline uppercase cursor-pointer text-sm hover:text-orange"
       @click="isCollapsed = !isCollapsed"
       x-show="originalContent.length > maxLength"
       x-text="isCollapsed ? '<?= __('- Read less') ?>' : '<?= __('+ Read more') ?>'">
    </a>
</div>