How to Expand Text on Clicking Read More Link with Javascript

Today, I’ll build functionality with the help of the readmore.js JavaScript plugin to expand read more link text. This plugin is very easy to implement and fully customizable.

Sometimes you don’t want to show all the content on a full page and instead of that, you want to show part of the content. When a user clicks on a link, they able to read more content on the same page.

With the help of JavaScript read more expand functionality, you can easily allow users to show more or less content by clicking a link or a button.

You don’t need to be an expert in JavaScript to add such nice and simple functionality to your website. All you have to place a JavaScript file and do a few basic settings.

The ReadMore.js is a small vanilla JavaScript plugin that adds a “read more” functionality on the text blocks.

It provides a great user experience. Instead of showing all the content all over the page isn’t making sense. It’s better to make it user-friendly by showing some part of the text and when the user clicks on reading more buttons or links, they can see more content.

To build read more function to show more content isn’t quite hard. All you have to simply build a link and add some JavaScript or jQuery code to do that.

And to style the content in a better way, I will go with CSS.

You don’t have to worry because I will give you step by step guideline also going to prepare a jQuery show more plugin which you can download.

The plugin includes all the script to handle the functionality and also styles.

You can see the demo on how it looks like and how it works. The download included the exact same style and functionality like the demo.

How to Expand Text on Clicking Read More Link with JavaScript

Ok, Let me explain how it works. In the first view, the user will see some part of the content by default. Upon on click show more link, the user able to see more text in the same area and the content area will be slide down automatically.

When a user clicks again on the same link, the part of the content will be hidden and the content area will slide up.

We can say, this functionality is a toggle function of jQuery but we are going to develop it in a different way. We will build it by using the JavaScript library.

How to use

To implement read more using jQuery, you have to add the ReadMore.js library into the header of the webpage. It is a minified version.

<script src="src/readMoreJS.min.js"></script>

Let’s have a look at the HTML:

<div class="dummy">
 <p>Simple test goes here.</p>
</div>
<div class="dummy">
 <p>Simple test goes here.</p>
</div>

To initialize the functionality and specify the target content wrapper, You have to do like this way.

$readMoreJS.init({
   target: '.dummy p',           // Selector of the element the plugin applies to (any CSS selector, eg: '#', '.'). Default: ''
   numOfWords: 50,               // Number of words to initially display (any number). Default: 50
   toggle: true,                 // If true, user can toggle between 'read more' and 'read less'. Default: true
   moreLink: 'read more ...',    // The text of 'Read more' link. Default: 'read more ...'
   lessLink: 'read less'         // The text of 'Read less' link. Default: 'read less'
});

That all you need to do when implementing the show more link into the content area. If you like, please leave a comment and let me know about it. Thanks.

2 thoughts on “How to Expand Text on Clicking Read More Link with Javascript”

Kat
September 23, 2021 at 11:43 pm
Hi there!
I have been trying to implement this plugin for days and it just does not work for me.
First questions, you are calling a p class in your Javascript target: “.dummy p”, but in your html it is a div class=”dummy”, that would be calling all the paragraphs with the class dummy, but you only have a div = dummy. Would that make it not work? I tried both ways, still doesn’t work. If in my code I have < div class="eventbio" ( instead of dummy) and I change it in the JavaScript to target: 'eventbio p" will it still work. I also changed the CSS to .eventbio. Would this mess it up? What am I doing wrong? Thanks so much for your help.
- Muhammad Asif
  September 25, 2021 at 6:05 pm
  Hi Kat!
  First of all make sure you have properly included jQuery JavaScript library into your project. Secondly, make sure your HTML looks like below:
```
<div class="eventbio">

<p> Your text goes here </p>

</div>
```
  Also, keep in mind that words should be greater than 50 (that is the default limit). The plugin will work fine if you don’t write p tag inside your “eventbio” div element. In this case, change your selector in plugin configuration option as follows:
```
$readMoreJS.init({
   target: '.eventbio',
});
```