Collection description button

[Kristiyan14456]

Hi,

I am using the Dawn theme and would like to add a "read more" "read less" button to my collection page descriptions.

Some of my collection descriptions are too long (for SEO purpose) and I need that toggle button to make it more user friendly.

Thanks in advance.Please im trying to fix this issue for ages but i cant find the solution 

[Guleria · Accepted solution]

Hello @Kristiyan14456 ,

1) Edit section -> main-collection-banner.liquid
Search for code

{%- if section.settings.show_collection_description -%}
        <div class="collection-hero__description rte">{{ collection.description }}</div>
      {%- endif -%}

once found replace it with this one

{% if section.settings.show_collection_description %}
  <div class="collection-hero__description rte">
    <div id="collection-description">{{ collection.description }}</div>
    <button id="toggle-description" class="toggle-button">Read more</button>
  </div>
        <style> 
.collection-hero__description .truncated {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Show only 3 lines initially */
  -webkit-box-orient: vertical;
}
          button#toggle-description {
    background-color: transparent;
    border: 0;
    text-decoration: underline;
    font-weight: bold;
}

        </style>
      
          <script>
document.addEventListener("DOMContentLoaded", function() {
  const description = document.getElementById("collection-description");
  const toggleButton = document.getElementById("toggle-description");

  // Initial state: truncated
  description.classList.add("truncated");

  toggleButton.addEventListener("click", function() {
    if (description.classList.contains("truncated")) {
      // Show full description
      description.classList.remove("truncated");
      toggleButton.textContent = "Read less";
    } else {
      // Truncate description
      description.classList.add("truncated");
      toggleButton.textContent = "Read more";
    }
  });
});
</script> 
{% endif %}

If problem solved don't forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Thanks

[Kristiyan14456]

Hey there!Thank you for the posted solution but i cant find this code {%- if section.settings.show_collection_description -%}

[Kristiyan14456]

I got it you are a lifesaver!Thank you so much