Hide a 'Read More' button

Morning people. I’ve setup an interaction on a button that changes the height of a text box from 400px to Auto in order to make a ‘Read More’ system. This appears to work well, but the issue I can’t solve is how to hide that button when there is only a small amount of copy which does not require a ‘read more’ option.

Any ideas please? Below is the share link and its on a ‘Products Template page’


Here is my public share link: https://preview.webflow.com/preview/fixfire?utm_source=fixfire&preview=b6547784705bd452281a3b6e326f4fd0&fbclid=IwAR0O0vq916bDChoUHn6eOjGO5M2O-xq6p-dY80v08erDu-OJtEgBJqUBv4s]
(how to access public share link)

Hey man, hope it’s not too late for this info. There are two ways I believe would work, both require manual code

Put this inside head tag and then add the class .truncate to the paragraph that you’re looking to truncate. This code only triggers if the paragraph has more than 5 lines, in this instance, and it replaces the rest of the text with an ellipsis.

<style>
.truncate { 
	overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
</style>

You will then have to create some kind of trigger to add and remove the truncate class using the finsweet class adder https://visualscript.webflow.io/. I haven’t personally tried this fix but I don’t see why it wouldn’t work. You can also incorporate the code that changes the height to auto. This is a link to how to use the class adder https://cmsdocs.webflow.io/#add

The second method is using this code snippet from W3Schools:

<style>
#more {display: none;}
</style>
</head>
<body>

<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

// bear in mind that the first part, the dots and the second part of the paragraph will have to be separate CMS entries.

<button onclick="myFunction()" id="myBtn">Read more</button>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

Once you’ve added these 3 CMS entries 1. first part of paragraph 2. dots 3. second part of paragraph, you can set up some conditional visibility of parts 2-3 to only display on collections that have a switch turned on.

I haven’t had the chance to try these out but my experience with Webflow makes me believe that they should work. Let me know if you ever get a chance to try them out!

1 Like

Thank you so much! I’ll give that a try when I get a moment.

Appreciate your help :slight_smile:

1 Like

No worries! Will do the same :wink: