Global truncate code for any element

[TeTx]

I have a code I'm utilising to truncate + “Read More” across different elements in my store. It’s working perfectly for product descriptions, but not when I’m trying to use it on a “Rich Text” section with a Metaobject value.

Script in theme.liquid:

<script>
let read_more = document.getElementById('read-more')
let read_less = document.getElementById('read-less');
let truncated_description = document.getElementById('truncated-description');
let full_description = document.getElementById('full-description');

read_more.addEventListener('click', showHideDescription)
read_less.addEventListener('click', showHideDescription)

function showHideDescription(){
  let ID = this.id
  if(ID === "read-more"){
    truncated_description.style.display = "none";
    full_description.style.display = "block";
  }else {
    truncated_description.style.display = "block";
    full_description.style.display = "none";    
  }
}
</script>

CSS in base.css:

.truncate-container {
  width: 100%;
}
.read-additional {
  text-decoration: underline;
}
.read-additional:hover {
  cursor: pointer;
}
#full-description {
  display: none;
}
#read-more {
  font-weight: 500;
}
#read-less {
  font-weight: 500;
}

Custom Liquid in product template - this works, has some different conditions so ignore those:

{% if product.description.size > 150 %}
<div class="truncate-container">
<div id="truncated-description">{{ product.description | strip_html | truncate: 150 }} <span id="read-more" class="read-additional">Read more</span></div>
<div id="full-description">
{{ product.description }} <p><span id="read-less" class="read-additional">Read less</span></p></div>
</div>
{% else %}
{{ product.description }}
{% endif %}

Custom Liquid in metaobject template - this works until hitting “Read more”, which causes the element to disappear completely instead of displaying full description:

<div class="truncate-container">
<div id="truncated-description">{{ metaobject.main_copy | truncate: 500 }} <span id="read-more" class="read-additional">Read more</span></div>
<div id="full-description">
{{ metaobject.main_copy }} <p><span id="read-less" class="read-additional">Read less</span></p></div>
</div>

[LizHoang]

Hello @TeTx ,

You can try the following scripts:
<script>
  document.addEventListener(“DOMContentLoaded”, function() {
      let read_more = document.getElementById(‘read-more’);
      let read_less = document.getElementById(‘read-less’);
      let truncated_description = document.getElementById(‘truncated-description’);
      let full_description = document.getElementById(‘full-description’);      if (read_more && read_less && truncated_description && full_description) {
          read_more.addEventListener(‘click’, showHideDescription);
          read_less.addEventListener(‘click’, showHideDescription);
      }      function showHideDescription(){
          let ID = this.id;
          if(ID === “read-more”){
              truncated_description.style.display = “none”;
              full_description.style.display = “block”;
          } else {
              truncated_description.style.display = “block”;
              full_description.style.display = “none”;
          }
      }
  });
</script>

I hope this helps. Let me know if you have any other questions.

Best regards,
Liz