Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

How to Expand Text on Clicking Read More Link with Javascript

Ashfaq Ahmed by Ashfaq Ahmed
January 13, 2020
in How To
2
Read More Javscript Expand
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

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.

Demo Download
Previous Post

Cool CSS Buttons with Different Sizes

Next Post

How to Make Parallax Background Video with CSS3 & JavaScript

Next Post
How to Make Parallax Background Video

How to Make Parallax Background Video with CSS3 & JavaScript

Comments 2

  1. Kat says:
    1 year ago

    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.

    Reply
    • Muhammad Asif says:
      1 year ago

      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',
      });
      

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
Easy to Apply CSS Image Hover Transition Effects

CSS Image Hover Transition Effects

December 5, 2019
Video Parallax Background

Fullscreen Video Parallax Background Using CSS3

December 22, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.