Read More / Read Less on collection description

[HTX-Fluid-Power]

I am working on creating collection pages and the descriptions I have added are long. How can I make it to where it only shows the first 4 or 5 lines of text and then a read more option and read less option at the end when expanded? I am on the Trade theme.

[namphan]

Hi @HTX-Fluid-Power ,

You can refer to the following instructions, just change it directly to the collection description.

I hope it helps!

[HTX-Fluid-Power]

This one didn’t work.

[oscprofessional]

Hello @HTX-Fluid-Power

To display only the first few lines of the collection description with a “Read More” and “Read Less” toggle, you can achieve this using a combination of Liquid, HTML, CSS, and JavaScript. Here’s how:

Step 1: Modify the main-collection-banner.liquid

Update your collection description code in the main-collection-banner.liquid.

Find {{ collection.description }} and replace with below code

  

    {{ collection.description }}
  

  
  

2. add javascript at the end for the HTML code in the file main-collection-banner.liquid

3. Add below css code in your base.css file

.collection-description .description-content {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5; /* Number of lines to display */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  max-height: 10em; /* Adjust based on line height */
  line-height: 2em; /* Adjust for spacing */
}

.collection-description.expanded .description-content {
  overflow: visible;
  -webkit-line-clamp: unset;
  max-height: none;
}

.read-more-btn,
.read-less-btn {
  margin-top: 10px;
  cursor: pointer;
  background: none;
  border: none;
  color: #007bff; /* Adjust to theme colors */
  text-decoration: underline;
}

Output

[OfficeStockZA]

Hello, I need help with this. Can you do the coding for me? My e-mail: johan@officestock.co.za