“Read More” or “Read Less” demo

The Japanese word 'Kuchi zamishi' is the act of eating when ... you're not hungry because your mouth is lonely. We do this all the time.

A mash-up of two words to make a new word (such as breakfast and lunch ... into brunch, or motel from motor and hotel) is called a portmanteau.

HTML

<section class="rms-section">
<div class="rms-content-container">
<span class="rms-content-read-less">The Japanese word 'Kuchi zamishi' is the act of eating when <span class="dots">... </span></span>
<span class="rms-content-read-more"> you're not hungry because your mouth is lonely. We do this all the time.</span>
<button class="rms-button btn btn-secondary float-end">Read More</button>
<div class="rms-header-bottom"></div>
</div>
<div class="rms-after-content"></div>
<div class="rms-content-container">
<span class="rms-content-read-less">A mash-up of two words to make a new word (such as breakfast and lunch <span class="dots">... </span></span>
<span class="rms-content-read-more">into brunch, or motel from motor and hotel) is called a portmanteau.</span>
<button class="rms-button btn btn-secondary float-end">Read More</button>
<div class="rms-header-bottom"></div>
</div>
</section>

CSS

.rms-section {
margin: 0 auto;
max-width: 440px;
padding: 2em;
}
.rms-content-container {
padding: 1em 0;
position: relative;
border-top: 2px dotted rgba(0, 0, 0, 0.15);
border-bottom: 2px dotted rgba(0, 0, 0, 0.15);
}
.rms-header-bottom {
clear: both;
}
.rms-after-content {
margin-bottom: 4em;
}
.rms-button-container {
margin-bottom: 2em;
}
.rms-content {
padding: 1em;
background-color: rgba(0, 0, 0, 0.10);
}
.rms-button {
display: block;
width: 120px;
position: relative;
margin-top: 60px;
margin-bottom: -34px;
}
textarea:focus,
input[type="search"]:focus,
input[type="submit"]:focus,
.form-select:focus,
.btn:focus,
a.page-link {
border-color: rgba(208, 212, 218, 0.9);
box-shadow: none !important;
outline: 0 none !important;
}

JS

$(document).ready(function() {
$(".rms-content-read-more").hide();
$(".rms-button").on("click", function() {
var buttonText = $(this).prev(".rms-content-read-more").is(':visible') ? 'Read More' : 'Read Less';
$(this).text(buttonText);
$(this).prev('.rms-content-read-more').toggle();
$(this).parent('.rms-content-container').find(".dots").toggle();
$(this).toggleClass("btn-warning");
});
});

Show or Hide Elements

LIST OF JQUERY SNIPPETS