Hi there,
I’m trying to add a “Read More / Read Less” toggle to the collection description on my Dawn theme store. Currently, the full description is always visible, but I want to:
HERE IS AN EXAMPLE BELOW:
Site: crepscity.com
Thank you in advance.
Hi @crepscity ,
To achieve a “Read More / Read Less” toggle in the collection description of your Dawn theme store, follow the below CSS:
$(document).ready(function () {
var contentDiv = $(“#comp-l8jfqanf”);
var fullText = contentDiv.html();
var words = fullText.split(" “);
var shortText = words.slice(0, 20).join(” ") + “…”; // Adjust word count for two lines
if (words.length > 20) {
contentDiv.html(shortText);
contentDiv.append(‘ Read More’);
}
contentDiv.on(“click”, “.read-more”, function (e) {
e.preventDefault();
if ($(this).text() === " Read More") {
contentDiv.html(fullText + ’ Read Less‘);
} else {
contentDiv.html(shortText + ’ Read More’);
}
});
});
please note that all the content must be in the parent div remove other inside HTML tags
Regards,
Thanks for the help! I just need a bit more guidance on where exactly to place each part of the code. Specifically:
Find this line in sections/main-collection-banner.liquid
{%- if section.settings.show_collection_description -%}
<div class="collection-hero__description rte">{{ collection.description }}</div>
{%- endif -%}
</div>
and then replace this bellow code it will help to show collection details button
{%- if section.settings.show_collection_description -%}
{% if collection.description.size > 200 %}
<div class="collection-hero__description rte description" id="description">{{ collection.description }}</div>
<button class="read-more-btn" id="toggleButton">Read More</button>
{% else %}
{{ collection.description }}
{% endif %}
{%- endif -%}
and footer area add this js
Hi @crepscity
Sorry for the late reply. Have you solved the problem?
If not please feel free to reply. I’m glad for that.
Thanks,
Shishir Hasan
Hi Arif, i need to know what file name exactly to paste this code ?
.description { position: relative; overflow: hidden; text-align: center; max-height: 4.6em; font-size: 16px; line-height: 26px; transition: max-height 0.5s ease-in-out; } .description::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2em; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%); pointer-events: none; transition: opacity 0.3s ease-in-out; } .description.full::after { opacity: 0; } .read-more-btn { margin-top: 10px; background: transparent; color: #000; border: none; text-transform: uppercase; padding: 8px 15px; cursor: pointer; border-radius: 5px; transition: background 0.3s; text-decoration: underline; text-underline-offset: 4px; } .collection-hero__description{ margin: auto; } .collection-hero__text-wrapper{ text-align:center; }you also said to add footer area add this js. what file exactly please.
Hi Arif,
I have followed all the steps and inserted the code, and it’s working well. However, there is one issue with the “Read More / Read Less” functionality:
Can you please check if I’ve implemented everything correctly? I’ve attached some screenshots for reference. Let me know what might be causing the issue.
@crepscity
The button show hide made by the javascript did you insert the javascript at the end of your code before {%schema%} tag.
Secondly, .description { in this CSS tag you can adjust the height for your more text.
Hope this will help you to resolve the issue
Ive added the code as you see here below. Please let me know what im doing wrong cause (‘read more’ ‘read less’) is still not working?
@crepscity
I am not sure your footerare js is loading or not. Can you add the javascript code after the style file.
If fotoer area js load , in that case remove the top tag as javascript file do not need this declaration
Footerare js is loading and ive removed the top tag. However the read more read less is not working?
can you try with this code
const description = document.getElementById("description");
const button = document.getElementById("toggleButton");
button.addEventListener("click", function () {
if (description.classList.contains("full")) {
description.style.maxHeight = "4.6em";
button.textContent = "Read More";
} else {
description.style.maxHeight = description.scrollHeight + "px";
button.textContent = "Read Less";
}
description.classList.toggle("full");
});
, hope this time it will solve
I’ve tried using the new code, but unfortunately, it didn’t work. Can you take a look at my code to see if I applied it correctly, or review the screenshots I provided above regarding the code.
Hi Shishir,
not yet
Hi Arif,
Just checking to see if you saw my recent response regarding the new code. Unfortunately, it didn’t solve the issue.
Please use the js file under the same liquid file under the style code which you put.
I am not able to find the js where you insert.
Your js code not exits in that page that is why it do not work. I have insert via chrome dev and it worked.
Thank you for identifying that, it works perfectly. Just one thing, there is a grey hover effect when you click the read more read less? can you help me remove this?
If you want to remove the grayed opacity area then remove .description::after CSS class background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
then your grayed area will removed