adding a read more on my long product descriptions and making it full page width

[ImStillLearning]

Hi all

So I am wanting to add a read more to my long product descriptions. I am also wanting the product description to be full page width and keeping the style that i am using.I already am using this in a custom liquid section on my products:
<div class="page-width">
{{ product.description }}
</div>

I am using the Ride theme. 

Any help will be really appreciated 

[Leysam · Accepted solution]

@ImStillLearning Here a quick idea how to do it. 

NOTE: I haven't tested this in an actual site.

<div class="page-width">
   <div class="product-description">
     <div class="short">{{ product.description | truncate:'205' }}...</div>
     <div class="long">{{ product.description }}</div>
     <div class="read-more-button">Read More</div> 
  </div>
</div>

<script>
const readMoreBtn = document.querySelector('.read-more-button');
const text = document.querySelector('.product-description');
readMoreBtn.addEventListener('click',(e)=>{
    text.classList.toggle('more');

    if (text.classList.contains('more')) readMoreBtn.innerHTML = 'Read Less';
    else  readMoreBtn.innerHTML = 'Read More';
})
</script>
<style>
.product-description .long {
  display: none;
}
.product-description.more .long {
  display: block;
}
.product-description.more .short{
  display: none;
}
</style>

[ImStillLearning]

Thank you this worked!

[ImStillLearning]

Ok So I have been testing it in my duplicated theme and I have noticed that it will work on most products but then on some you click on read more and the whole description disappears.

[Leysam]

@ImStillLearning HTML tags are treated as strings, so you should strip any HTML from truncated content. If you don't strip HTML, then closing HTML tags can be removed, which can result in unexpected behavior.

Heres an updated version. NOTE that this solution will remove any HTML/styling from your description.

<div class="page-width">
   <div class="product-description">
     <div class="short">{{ product.description | strip_html | truncatewords:'50' }}...</div>
     <div class="long">{{ product.description }}</div>
     <div class="read-more-button">Read More</div> 
  </div>
</div>

<script>
const readMoreBtn = document.querySelector('.read-more-button');
const text = document.querySelector('.product-description');
readMoreBtn.addEventListener('click',(e)=>{
    text.classList.toggle('more');

    if (text.classList.contains('more')) readMoreBtn.innerHTML = 'Read Less';
    else  readMoreBtn.innerHTML = 'Read More';
})
</script>
<style>
.product-description .long {
  display: none;
}
.product-description.more .long {
  display: block;
}
.product-description.more .short{
  display: none;
}
</style>

Another way to solve this issue is to create a custom meta field in the backend where you can insert the short description.
Follow this tutorial

and update the code to:

<div class="page-width">
   <div class="product-description">
     <div class="short">{{ product.metafields.custom.short_description }}...</div>
     <div class="long">{{ product.description }}</div>
     <div class="read-more-button">Read More</div> 
  </div>
</div>

<script>
const readMoreBtn = document.querySelector('.read-more-button');
const text = document.querySelector('.product-description');
readMoreBtn.addEventListener('click',(e)=>{
    text.classList.toggle('more');

    if (text.classList.contains('more')) readMoreBtn.innerHTML = 'Read Less';
    else  readMoreBtn.innerHTML = 'Read More';
})
</script>
<style>
.product-description .long {
  display: none;
}
.product-description.more .long {
  display: block;
}
.product-description.more .short{
  display: none;
}
</style>

[monsieur911]

Hi @Leysam , 
This code works, however as you mentioned, its deleting all the style:

<div class="page-width">
   <div class="product-description">
     <div class="short">{{ product.description | strip_html | truncatewords:'50' }}...</div>
     <div class="long">{{ product.description }}</div>
     <div class="read-more-button">Read More</div> 
  </div>
</div>

<script>
const readMoreBtn = document.querySelector('.read-more-button');
const text = document.querySelector('.product-description');
readMoreBtn.addEventListener('click',(e)=>{
    text.classList.toggle('more');

    if (text.classList.contains('more')) readMoreBtn.innerHTML = 'Read Less';
    else  readMoreBtn.innerHTML = 'Read More';
})
</script>
<style>
.product-description .long {
  display: none;
}
.product-description.more .long {
  display: block;
}
.product-description.more .short{
  display: none;
}
</style>

I was trying to use meta fields, but its not working 😞 Is there any other solution which can save the styling of description? 

Thank you!