'Show button when text overflows

I want to show a 'Show more' button when the text is overflowing beyond 1.5 lines and show the 'show less' button while is expanded. The button should look like part of the text like in the screenshot. And I want to use the height as the criteria not the number of characters in the text.

while not expanded:

enter image description here

while expanded:

while expanded

Any help is appreciated

javascripthtmlcssreactjs


Solution 1:[1]

To create a show more and less button you need to create an Onclick Function using Javascript, CSS, and HTML.

For Example:

function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("mybtn");

// Combine function w/ If Statement 
if (dots.style.display === "none") {
dots.style.display === "inline";
btnText.style.display = "Show More"; 
moreText.style.display = "none"; } else { dots.style.display ="none";
btnText.innerHTML = "Show Less";
moreText.style.display = "inline";
  }
}
#more {display: none;}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span id="dots">...</span><span id="more">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p>

<button onclick="myFunction()" id="mybtn">Show More</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DesmondDeon

Related Questions