Hyva : How to create Read More Read Less Button

In this tutorial, we’ll walk you through how to easily create a “Read More Read Less” button in your Hyva Magento2 theme using Tailwind CSS and Alpine JS. This functionality enhances user experience by allowing users to toggle content visibility, making your page cleaner and more interactive.

Step-1. You just copy and paste the below code into your PHTML File, CMS block, or CMS Page.

You have two options for implementing the “Read More Read Less” button: with or without specifying height. Choose the approach that best fits your requirements.

Option: 1 WITHOUT height

<div x-data="{ isCollapsed: false, maxLength: 20, originalContent: '', content: '' }"
   x-init="originalContent = $el.firstElementChild.textContent.trim(); content = originalContent.slice(0, maxLength)"
>
   <span x-text="isCollapsed ? originalContent : content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</span>
   <button
       @click="isCollapsed = !isCollapsed"
       x-show="originalContent.length > maxLength"
       x-text="isCollapsed ? 'Show less' : 'Show more'"
       class="cursor-pointer uppercase font-bold"
   >
   </button>
</div>

Option: 2 WITH height

<div x-data="{ expanded: false }">
   <div class="relative" x-bind:class="{'max-h-48 overflow-hidden': !expanded}" x-ref="container" x-bind:style="expanded ? 'max-height: ' + ($refs.container.offsetHeight + 20) + 'px; padding-bottom: 40px;' : ''">
       <p class="pb-10" x-bind:class="{'pb-0': expanded}">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
       <div class="text-primary-500 text-center cursor-pointer uppercase font-bold absolute left-0 right-0 z-20 mx-auto bottom-0" @click="expanded = !expanded">
           <span x-text="expanded ? 'Read Less' : 'Read More'"></span>
       </div>
   </div>
</div>

Step-2. Run the below commands to see your changes
Once you’ve added the code, you need to run the following commands to see the changes in your Magento2 theme.

1.Clear the cache:

bin/magento cache:clean

2.Build your Tailwind CSS:

npm run build-prod

These commands ensure that the changes take effect on your site.

Advantages to adding the Read More Read Less Button:

• Achieve this without adding any external JS/CSS.
• Minimal use of Tailwind classes and Alpine.
• Customizable: You can change the design to meet your requirements.
• Responsive: This code adapts its layout to different screen sizes, ensuring your code looks great on all devices.
• Customers can’t scroll more if they don’t want to read the full content

We hope this tutorial makes it easy for you to integrate a “Read More Read Less” button into your Hyva Magento 2 theme. It’s a simple yet effective way to enhance content visibility and improve the user experience on your site.

At Evrig, we specialize in creating high-quality Magento stores that are both functional and user-friendly. If you’re implementing custom features like the “Read More Read Less” button or need any other Magento development assistance, our team of experts is ready to support you every step of the way.

Get in touch with us today to discuss how we can help you elevate your e-commerce website with custom Magento solutions, tailored design and optimal performance.