Show more or less content on a web page

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;
}

$(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");

});
});

Alternate table row styles Conditional formatting of table rows Copy text to clipboard Disable spaces in an input field Multi step form with progress indicator Read more or less Remove the leading and trailing space Short functions Toggle visibility with a slide effect Toggle visibility without pushing content down Validate checkboxes Validate input fields Validate radio buttons Validate TinyMce editor

jQuery

Show more or less content