What does this jQuery snippet do?

Hides the extra content by default.
Toggles the content and related elements (+ .dots).
Switches the button text between "Read More" and "Read Less".
Toggles a CSS class (Bootstrap btn-warning) for styling purposes.

Demonstration

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 space input in text fields 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

toggle the visibility of extra content

What does this jQuery snippet do?

About the author