Jquery Show Less and More Content

Abhigyan Singh 12th Jul 2020

In this tutorial you will learn how to create jquery show less more content or more less toggle in jquery. Show hide content in jquery is important for content oriented website.

This more less script is very important in such website where content is more and you need to show a limited amount of content on first view.

Here you can do this very easily you can display a limited amount of content in first view and if user want to show more content then you can display all content by clicking show link.

This script is very important because sometimes in dynamic website content coming from CMS is not in same amount. So if we display the content then our design will get changed. For this we can use this script.

Here we use simple jquey for show less more toggle. In this jquery , we calls DIV based class and all the DIV class iterates in this jquery and action performs.

This javascript is very simple and customized. You only need to change their value.

How It works:

In HTML we use a DIV base class (Here <div class="show">)

HTML FILE:

<div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna tellus, vulputate in feugiat vel, auctor at ipsum. Curabitur imperdiet orci eget congue malesuada. Vestibulum gravida mi sed facilisis elementum. Phasellus sed eros nulla. Proin porta aliquam tristique.

Suspendisse tincidunt augue eget nulla luctus porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna tellus, vulputate in feugiat vel, auctor at ipsum. Curabitur imperdiet orci eget congue malesuada. Vestibulum gravida mi sed facilisis elementum. Phasellus sed eros nulla. Proin porta aliquam tristique. Suspendisse tincidunt augue eget nulla luctus porta.</div>

JAVASCRIPT FILE:

$(function() {
var showTotalChar = 200, showChar = "Show (+)", hideChar = "Hide (-)";
$('.show').each(function() {
var content = $(this).text();
if (content.length > showTotalChar) {
var con = content.substr(0, showTotalChar);
var hcon = content.substr(showTotalChar, content.length - showTotalChar);
var txt= con + '<span class="dots">...</span><span class="morectnt"><span>' + hcon + '</span>&nbsp;&nbsp;<a href="" class="showmoretxt">' + showChar + '</a></span>';
$(this).html(txt);
}
});
$(".showmoretxt").click(function() {
if ($(this).hasClass("sample")) {
$(this).removeClass("sample");
$(this).text(showChar);
} else {
$(this).addClass("sample");
$(this).text(hideChar);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});

showTotalChar :- Total number of character you want to display in first view. You can change accordingly.

showChar:- It is a link to show remaining content.

hideChar:- It is link to hide content and display first view.

Remaining all will be same.

CSS FILE:

.morectnt span {
display: none;
}

I hope this tutorial will help you. If you have any query regarding this, Please feel free to ask in comment section.

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