Craft Theme - Read More button dont works.

xxlopaxxtv
Visitor
1 0 0

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. 

1. Tutorial which i used was 

 1. 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>

2. 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>

xxlopaxxtv_0-1695396914471.png

3. To the collection page, i inserted 

 

<a class="show_hide>Read more</a> <div class="read-more"> Full description </div>

xxlopaxxtv_1-1695397175307.png

And it looks like this 

xxlopaxxtv_2-1695397209249.png


2. Tutorial which i tried to use.
 1. 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>

xxlopaxxtv_3-1695397423349.png

2. Then going to main.collection.banner.liquid and replacing {{ collection.description}} there 

xxlopaxxtv_4-1695397666510.png

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>

 

xxlopaxxtv_6-1695397856556.png


Then it appers like this 

 

xxlopaxxtv_8-1695398582955.png

But when i click the Read More button, i dont see anything on the page. as you can see here

xxlopaxxtv_9-1695398617575.png

I really appreciate all of your helps. 
Best Regards,
Tomas

 

 

Replies 0 (0)