The multi-line truncation with line-clamp utility class from Tailwind CSS will be used to demonstrate how to create a show/hide feature with a transition effect in both pure JavaScript and ReactJS in this post.
Creating a Read More/Read Less Button using Tailwind CSS and Javascript
HTML with TailwindCSS
Using tailwind truncate multiple lines we will apply the show more/less feature
The Tailwind Multiline truncate plugin must be installed before you can proceed.The official line-clamp documentation can be found here.
<p class="line-clamp-5 transition duration-300 paragraph ">
In this article, we'll demonstrate how to create a "Read More Read Less" button using HTML and CSS.
When you want to hide more details while still giving readers a sense of what the article or post is about,
the read more and read less buttons might be useful.</p>
JAVASCRIPT
Here is the JavaScript code to determine whether an element has been truncated.
function showMoreLess() {
var elements = document.querySelectorAll('.paragraph');
elements.forEach(function(element) {
if (element.scrollHeight > element.clientHeight) {
var button = document.createElement("button");
button.type = "button";
button.classList.add("showMoreLess");
button.textContent = "read more";
element.parentNode.insertBefore(button, element.nextSibling);
}
});
var showMoreLessButtons = document.querySelectorAll(".showMoreLess");
showMoreLessButtons.forEach(function(button) {
button.addEventListener("click", function() {
var paragraph = button.previousElementSibling;
if (paragraph.classList.contains("line-clamp-none")) {
button.textContent = "read more";
paragraph.classList.remove("line-clamp-none");
} else {
button.textContent = "read less";
paragraph.classList.add("line-clamp-none");
}
});
});
}
showMoreLess();
Using offsetHeight and scrollHeight, determine whether a text has been shortened.
OffsetHeight and scrollHeight are two characteristics for HTML elements that we can use to determine whether the text has been truncated.
offsetHeight:
is a measure of the element's height in pixels, which includes any borders, padding, and horizontal scrollbars (if rendered).
scrollHeight:
JavaScript has a property called "scrollHeight" that calculates an element's overall height, including any content that is hidden because of overflow.
Tailwindcss show/hide transition reactjs
Reactjs
import React, { useEffect } from "react";
const ShowMoreLess = () => {
useEffect(() => {
const elements = document.querySelectorAll(".paragraph");
elements.forEach((element) => {
if (element.scrollHeight > element.clientHeight) {
const button = document.createElement("button");
button.type = "button";
button.classList.add("showMoreLess");
button.textContent = "read more";
element.parentNode.insertBefore(button, element.nextSibling);
}
});
const showMoreLessButtons = document.querySelectorAll(".showMoreLess");
showMoreLessButtons.forEach((button) => {
button.addEventListener("click", () => {
const paragraph = button.previousElementSibling;
if (paragraph.classList.contains("line-clamp-none")) {
button.textContent = "read more";
paragraph.classList.remove("line-clamp-none");
} else {
button.textContent = "read less";
paragraph.classList.add("line-clamp-none");
}
});
});
}, []);
return (
<p className="line-clamp-5 transition duration-300 paragraph">
In this article, we'll demonstrate how to create a "Read More Read Less"
button using HTML and CSS. When you want to hide more details while still
giving readers a sense of what the article or post is about, the read
more and read less buttons might be useful.
</p>
);
};
export default ShowMoreLess;
This code gives texts the "read more/read less" feature. Usingdocument. querySelectorAll(), it first chooses all elements with the class 'paragraph'. A "read more" button is added after the element if the content's height is greater than the element's visible height.
The code checks whether the previous sibling element has the class "line-clamp-none" when the button is clicked. If so, the button's name changed to "read more" and the paragraph's class of "line-clamp-none" is removed. If the "line-clamp-none" class is unavailable, the button name is changed to "read less" and the class is added to the paragraph.
