Read more less or show hide content in jquery expander plugin

Abhigyan Singh 12th Jul 2020

This tutorial describes about more less or show hide content in jquery expander plugin without changing the format of that content. There are several plugin available for show hide content but it losses the content html format after clicking 'Read More' Content.

But using this Jquery Plugin we can display the same formatted html content after clicking read more link. This plugin is very important for online application because when we have more content and we have to display only few content according to our html page design, then this plugin is very useful.

At the same time, User can read more content and hide content using this expander plugin.

ExpanderJs Plugin:

This expander plugin just hide a portion of your content and display a 'Read More' link. So when user clicks that link remaining content will display and a 'Read Less' link will be available to again hide the content.

You can read another example of Jquery Show Less and More Content here.

By default, It slice the div upto a defined limit and display a read more link.

You can read code explanation below:

You need to add google api jquery library

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

Your html content:

Here we need to define a class on the div here called 'expandDiv';

<div class="expandDiv">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor pulvinar mi in pellentesque. In et faucibus nisi. </p>
</div>

Your Jquery Code :

<script src="jquery.expander.js"></script>
<script>
$(document).ready(function() {

$('div.expandDiv').expander({
slicePoint: 280, //It is the number of characters at which the contents will be sliced into two parts.
widow: 2,
expandSpeed: 0, // It is the time in second to show and hide the content.
userCollapseText: 'Read Less (-)' // Specify your desired word default is Less.
});

$('div.expandDiv').expander();
});

It need one expander JS called expander.js. download file contain this js file also.

Here, slicePoint: It is the number of characters at which the contents will be sliced into two parts.

If you have any doubt, Please let me know in comment section.

expandSpeed: It is the time in second to show and hide the content.

userCollapseText: Specify your desired word default is Less.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk