Read more and read less button with j-query .

Description:

There is all the HTML  code for Read Less and Read More Button. We will style our read more and read less buttons by using the body tag selector. Then, We will now style our read more and read less buttons using the class selector. When the user presses the button, the hidden extra text will reveal itself. Now that the read more button is enabled, the button text and functionality will switch to read less when the user hits it. The read more and read less buttons will essentially alternate.

J-query Code:

$(document).ready(function () {
  const mainDescEl = $("#main__desc");
  const mainButtonEl = $("#main__button");

  const textLength = 150;
  const longText = mainDescEl.text();
  const shortText = `${longText.slice(0, textLength)}...`;

  if (longText.length > textLength) {
    mainDescEl.text(shortText);
  }

  mainButtonEl.click(function () {
    const isActive = $(this).text().trim().toLowerCase() === "read less";

    if (isActive) {
      $(this).text("Read More");
      mainDescEl.text(shortText);
    } else {
      $(this).text("Read Less");
      mainDescEl.text(longText);
    }
  });
});