JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<h2>Some text here</h2><p>Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes.</p>
<div class="tHide"><p>Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes.</p></div>
<div class="rMore"><span class="moreBut">Read More</span></div>

<h2>Some text here</h2><p>Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes.</p>
<div class="tHide"><p>Hello World!</p></div>
<div class="rMore"><span class="moreBut">Read More</span></div>

<h2>Some text here</h2><p>Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes. Whitespace between elements is considered text nodes.</p>
<div class="tHide"><p>Hello World!</p></div>
<div class="rMore"><span class="moreBut">Read More</span></div>

CSS

body {font-family:Arial;}
p {line-height:30px;}

.tHide {max-height:0;transition:all 1s ease;overflow: hidden;}
.tShow {display:block;max-height:1000px;transition:all 1.5s ease-in;overflow: hidden;}
.rMore {display:block;width:100%;position:relative;
margin-top:-100px;padding:120px 0 0 0;background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));border:solid #C1E1C1;border-width:0 0 2px 0;}

.rMore_b {display:block;width:100%;position:relative;background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));border:solid #C1E1C1;border-width:0 0 2px 0;margin-top:-100px;padding:120px 0 0 0;}

.moreBut {color:#9BCE9B;cursor:pointer;display:block;position:absolute;bottom:0;right:0;z-index:100;padding:10px 0;}

JavaScript

/* Multiple Show/Hide */
let elements = document.querySelectorAll('.moreBut');

Array.prototype.forEach.call(elements, (item) => {
var prev = item.parentElement.previousElementSibling;
var rMore = item.parentElement;
item.addEventListener('click', function(e) {   
if (prev.className == "tShow") {prev.className = "tHide";item.innerHTML = "Read More";rMore.className = "rMore";}
else {prev.className = "tShow";item.innerHTML = "Close Text";rMore.className = "rMore_b";}       
});
});