JavaScript

Automatic “Read More” Link Display: How to Control Content Height with readmore.js

 

When considering web page design and UX, the “Read More…” feature, which collapses content that exceeds a certain height, is extremely useful. One script that implements this feature is “readmore.js”. This article provides a detailed explanation of how to use this script to automatically display a “Read More…” link in content areas that exceed a specified height.。

Contents
  1. Setting Up Automatic “Read More…” Display with readmore.js
  2. Creating the HTML Structure
  3. Demo Page Using readmore.js to Automatically Display “Read More…” for Content Exceeding a Specified Height
  4. Source: Readmore.js: jQuery Plugin for Long Blocks of Text
  5. Benefits of readmore.js
  6. Conclusion

Setting Up Automatic “Read More…” Display with readmore.js

First, you need to load the necessary libraries, jquery-1.9.0.min.js and readmore.js files. The following code sets up JavaScript to display a “Read More…” link when the specified content area (in this example, #info) exceeds the specified height (250px).

<script src="jquery-1.9.0.min.js"></script>
<script src="readmore.js"></script>
<script>
$(document).ready(function() {
	//Specify the id of the content area
	$('#info').readmore({
		moreLink: '<a href="#">Read More...</a>',
		maxHeight: 250
	});
});
</script>

Creating the HTML Structure

Next, set up the HTML structure for the content area where you want to display the link. The following example places content within multiple li tags in an area with id=”info”.

<div id="info">
<ul>
 	<li>
					<a href="https://dad-union.com/">DAD UNION</a></li>
 	<li>
					<a href="https://dad-union.com/about">About This Site</a></li>
 	<li>
					<a href="https://dad-union.com/javascript/57">How to Retrieve and Display JSON Arrays Using getJSON</a></li>
 	<li>
					<a href="https://dad-union.com/javascript/51">How to Retrieve and Display XML Data Using jQuery's $.get()</a></li>
 	<li>
					<a href="https://dad-union.com/javascript/46">window.location.search: How to Get URL Parameter Values with JavaScript</a></li>
 	<li>
					<a href="https://dad-union.com/javascript/43">How to Copy Input Text to Another Area with JavaScript</a></li>
 	<li>
					<a href="https://dad-union.com/javascript/32">How to Display Content According to the Height of the iframe Page</a></li>
</ul>
</div>
<!--/info-->

Demo Page Using readmore.js to Automatically Display “Read More…” for Content Exceeding a Specified Height

If you want to see this feature in action, you can test it on the following demo page.

Demo of Automatically Displaying “Read More…” for Content Exceeding a Specified Height Using readmore.js

Source: Readmore.js: jQuery Plugin for Long Blocks of Text

For official information and detailed documentation, refer to the following:

Source:Readmore.js: jQuery plugin for long blocks of text

Benefits of readmore.js

Of course, it is possible to implement a “Read More” link using other languages and technologies such as PHP. However, the biggest advantage of using readmore.js is that it allows you to display the link based on the height of the content, without worrying about the number of characters. This makes it easy to collapse content as needed while maintaining design consistency.

Conclusion

The above is an explanation of how to automatically display a “Read More…” link in content areas that exceed a specified height using “readmore.js”. By effectively using this script, you can enhance the user browsing experience.

　
※ If you choose to reuse this script, please do so at your own risk. Do not reuse the Google Analytics tags within the demo page tags.

readmore readmore.js
RELATED POST