Read more & Read less (shopify)

<div id="truncated">
  {{ product.description | truncatewords: 50, "... <a class='read-more-collection'>Read More</a>" }}
</div>
<div id="fullDescription" style="display: none; opacity: 0;">
  {{ product.description }}
  <a id="readLess" class="read-less-collection" style="cursor: pointer; font-weight: bold;">Read Less</a>
</div>

              {%- endif -%}
            {%- endif -%}
<style>
 .read-more-collection:hover{cursor:pointer}
</style>

<script>
document.getElementById('truncated').addEventListener('click', function () {
  const truncated = document.getElementById('truncated');
  const fullDescription = document.getElementById('fullDescription');

  // Fade out the truncated description
  truncated.style.transition = 'opacity 0.3s';
  truncated.style.opacity = '0';

  // Wait for the fade-out to complete
  setTimeout(() => {
    truncated.style.display = 'none'; // Hide the truncated element
    fullDescription.style.display = 'block'; // Show the full description

    // Fade in the full description
    fullDescription.style.transition = 'opacity 0.5s';
    fullDescription.style.opacity = '1';
  }, 300);
});

document.getElementById('readLess').addEventListener('click', function () {
  const truncated = document.getElementById('truncated');
  const fullDescription = document.getElementById('fullDescription');

  // Fade out the full description
  fullDescription.style.transition = 'opacity 0.3s';
  fullDescription.style.opacity = '0';

  // Wait for the fade-out to complete
  setTimeout(() => {
    fullDescription.style.display = 'none'; // Hide the full description
    truncated.style.display = 'block'; // Show the truncated description

    // Fade in the truncated description
    truncated.style.transition = 'opacity 0.5s';
    truncated.style.opacity = '1';
  }, 300);
});


</script>