Instructions for showing a "read more" and "read less" link when the text goes beyond a

Question

Instructions for showing a "read more" and "read less" link when the text goes beyond a

I am pulling paragraph content from the database and displaying only 300 characters on the screen, with a "read more" option for the user to see the rest of the content.

However, I am facing an issue where I also need to include a "less" option for the user to revert back to the truncated version of the content after clicking on "read more." I have attempted the following code snippet:

$(document).ready(function() {
  var maxLength = 300;
  $(".countParawords").each(function() {
    var myStr = $(this).text();
    if ($.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append(' <a href="javascript:void(0);" class="read-more">...READ MORE</a>');
      $(this).append('<span class="more-text">' + removedStr + '</span>');
    }
  });
  $(".read-more").click(function() {
    $('.less').show();
    $(this).append(' <a href="javascript:void(0);" class="less">LESS</a>');
    $(this).siblings(".more-text").contents().unwrap();
    $(this).remove();

  });
  $(".less").click(function() {
    $(this).siblings(".more-text").contents().wrap();
    $(this).remove();
  });
});

.box {
  width: 500px;
  margin: auto;
}

.box .more-text {
  display: none;
}

.box .less {
  display: none;
}

<div class="box">
  <p class="countParawords">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

javascript html jquery css

Answer 1

Answer №1

I've made a few modifications to your JavaScript code to ensure it functions correctly. Please give this a try:

$(document).ready(function() {
  var maxLength = 300;
  var moretxt = "...Show More";
  var lesstxt = "...Show Less";
  $(".countParawords").each(function() {
    var myStr = $(this).text();
    if ($.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append('<span class="more-text">' + removedStr + '</span>');
      $(this).append(' <a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>');
    }
  });
  $(".read-more").click(function() {
    if($(this).hasClass("more")){
        $(this).removeClass("more");
        $(this).text(lesstxt);
        $(this).siblings(".more-text").show();
    }
    else {
        $(this).addClass("more");
        $(this).text(moretxt);
        $(this).siblings(".more-text").hide();
    }

  });

});

.box {
  width: 500px;
  margin: auto;
}

.box .more-text {
  display: none;
}

.box .less {
  display: none;
}

<div class="box">
  <p class="countParawords">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Give it a try and let me know if you need further assistance.

Answer 2

I've made a few modifications to your JavaScript code to ensure it functions correctly. Please give this a try:

$(document).ready(function() {
  var maxLength = 300;
  var moretxt = "...Show More";
  var lesstxt = "...Show Less";
  $(".countParawords").each(function() {
    var myStr = $(this).text();
    if ($.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append('<span class="more-text">' + removedStr + '</span>');
      $(this).append(' <a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>');
    }
  });
  $(".read-more").click(function() {
    if($(this).hasClass("more")){
        $(this).removeClass("more");
        $(this).text(lesstxt);
        $(this).siblings(".more-text").show();
    }
    else {
        $(this).addClass("more");
        $(this).text(moretxt);
        $(this).siblings(".more-text").hide();
    }

  });

});

.box {
  width: 500px;
  margin: auto;
}

.box .more-text {
  display: none;
}

.box .less {
  display: none;
}

<div class="box">
  <p class="countParawords">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Give it a try and let me know if you need further assistance.

Answer 3

Answer №2

Altered the code to make it functional, incorporating a few adjustments which will be elaborated within the code itself.

$(document).ready(function() {
  var maxLength = 300;
  var readMore = null;
  $(".countParawords").each(function() {
    var myStr = $(this).text();
    if ($.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append(' <a href="javascript:void(0);" class="read-more">...READ MORE</a>');
      $(this).append('<span class="more-text">' + removedStr + '</span>');
      // Storing the content in a global variable as removing the element from the DOM removes its content
      readMore = $(this).find(".more-text").contents();
    }
  });
  $(".read-more").click(function() {
    // Targeting the parent element to hide the content as this element will be hidden
    $(this).parent().append(' <a href="javascript:void(0);" class="less">LESS</a>');
    $(this).siblings(".more-text").contents().unwrap();
    $('.less').show();
    $(this).hide();
    
    // Adding click listener inside the read more click listener as the element is created post clicking read more
    var parentThis = this;
    // Storing parent "this ref" in a variable to remove the less element
    $(".less").click(function() {
      // Wrapping the previously stored content in span
      readMore.wrap('<span class="more-text"></span>');
      // Making read more visible
      $(parentThis).show();
      // Removing the less element
      $(this).remove();
    });

  });
});

.box {
  width: 500px;
  margin: auto;
}

.box .more-text {
  display: none;
}

.box .less {
  display: none;
}

<div class="box">
  <p class="countParawords">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Kindly go through the comments scattered throughout the code

Answer 4

Altered the code to make it functional, incorporating a few adjustments which will be elaborated within the code itself.

$(document).ready(function() {
  var maxLength = 300;
  var readMore = null;
  $(".countParawords").each(function() {
    var myStr = $(this).text();
    if ($.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append(' <a href="javascript:void(0);" class="read-more">...READ MORE</a>');
      $(this).append('<span class="more-text">' + removedStr + '</span>');
      // Storing the content in a global variable as removing the element from the DOM removes its content
      readMore = $(this).find(".more-text").contents();
    }
  });
  $(".read-more").click(function() {
    // Targeting the parent element to hide the content as this element will be hidden
    $(this).parent().append(' <a href="javascript:void(0);" class="less">LESS</a>');
    $(this).siblings(".more-text").contents().unwrap();
    $('.less').show();
    $(this).hide();
    
    // Adding click listener inside the read more click listener as the element is created post clicking read more
    var parentThis = this;
    // Storing parent "this ref" in a variable to remove the less element
    $(".less").click(function() {
      // Wrapping the previously stored content in span
      readMore.wrap('<span class="more-text"></span>');
      // Making read more visible
      $(parentThis).show();
      // Removing the less element
      $(this).remove();
    });

  });
});

.box {
  width: 500px;
  margin: auto;
}

.box .more-text {
  display: none;
}

.box .less {
  display: none;
}

<div class="box">
  <p class="countParawords">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Kindly go through the comments scattered throughout the code

Instructions for showing a "read more" and "read less" link when the text goes beyond a

Answer №1

Answer №2

Similar questions

Trouble with data binding in AngularJS when using the input element

Issues have been raised with IE11's refusal to accept string(variable) as a parameter for the localStorage

Exploring React-Query's Search Feature

Ways to center a vertically aligned SVG in relation to text using Bootstrap

Can Chrome Support Bookmarklets?

Listening to audio on a mobile browser using an HTML audio element

Incorrect comparison of floats within arrays resulted in inaccurate results

Can the :after pseudo-element be modified when hovering, except when hovering over the after element itself?

Interactive webpages with dynamic HTML content, similar to the design of popular platforms such

Encountered an error in React where the declaration file for a module could not be located

What is the best way to ensure type safety in a Promise using Typescript?

The reset function for the selector is failing to properly reset the data within the table

A guide on deploying a Next.js application using Passenger

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

The increasing number of ajax requests is causing the page to become sluggish and unresponsive

Are there any reliable sources for a complete list of browser CSS properties?

Adjust the position if the height exceeds 100 pixels

Can a fixed div be made to adapt to different screen sizes?

Update the image source through an AJAX call

Using Vue.js data with an erb link_to tag