Hello, im taking serious problem with using Read More button on my collection page. I Have such a long text about the collection, and i want to show only the first few words. I tried to do it by these two tutorials, but any of these dont want to cooperate with me.
-
Tutorial which i used was
-
Add Jquery to theme.liquid on 9.row. <
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
- Add This code under the jquery
<script>
// code by https://websensepro.com
$(document).ready(function () {
$(".read-more").hide();
$(".show_hide").on("click", function () {
var txt = $(".read-more").is(':visible') ? 'Read More' : 'Read Less';
$(".show_hide").text(txt);
$(this).next('.read-more').slideToggle(200);
});
});
</script>
- To the collection page, i inserted
<a class="show_hide>Read more</a> <div class="read-more"> Full description </div>
And it looks like this
- Tutorial which i tried to use.
- Adding this code to theme.liquid on the bottom, just above the body tag
<style>
.read-more-collection:hover{cursor:pointer}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script>
var jq224 = jQuery.noConflict(true);
jq224('#truncated').on('click', function(){
jq224('#truncated').fadeOut(300, function(){
jq224('#fullDescription').fadeIn(500);
})
});
</script>
- Then going to main.collection.banner.liquid and replacing {{ collection.description}} there
for this code :
<div id="truncated">{{ collection.description | truncatewords: 10, "... <a class='read-more-collection'>Read More</a>" }}</div>
<div id="fullDescription" style="display: none">{{ collection.description }}</div>
Then it appers like this
But when i click the Read More button, i dont see anything on the page. as you can see here
I really appreciate all of your helps.
Best Regards,
Tomas