Craft Theme - Read More button dont works.

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

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

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

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

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