Home Web Development JavaScript jQuery Expanding Read More Link With CSS | Read More Button Expand

jQuery Expanding Read More Link With CSS | Read More Button Expand

April 4, 2020

4170

How we can create a read more button to expand and collapse any section? Solution: See this jQuery Expanding Read More Link With CSS, Read More Button Expand.

Previously I have shared some expandable programs, but this is a read more or load more button to show full content. Basically, when we have many texts in a section and we want to fit it on the webpage then we use read more extension. The read more button help to hide overlap texts or elements and on the click, it expands and shows all the contents.

Today you will learn to create Read More Button Expand function. Basically, there are 3 sections with a heading, some dummy text, and a read more button. At first or by default its has a height value and hides all overflow texts and when you will click on the button the section to expand and show all texts. When all section expands then the read more text will replace by ‘read less‘ and on clicking it the section will collapse or decrease again. Also, there is an arrow button that changes up and down according to the condition.

So, Today I am sharing jQuery Expanding Read More Link With CSS. There I have used HTML to create the layout, CSS for styling, and jQuery for functioning. As we know jQuery is a JavaScript library, it saves time and effort. This program can be used for text and other elements also like, you can use it on posts. If you want to show XX quantity of post and other will visible on a load more button click. You can use this program on your website after some modifications.

If you are thinking now how this read more link program actually is, then see the preview given below.

Preview Of Read More Button Expand

See this video preview to getting an idea of how this expanding program looks like.

Live Demo

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

Boostrap Cleans Buttons

Popup Contact Form

jQuery Filter Example

Font Resize Program

jQuery Expanding Read More Link Source Code

Before sharing source code, let’s talk about it. First I have created the main div named ‘container’ and placed all the elements inside it. Inside the main div, I have placed 3 div sections because there are 3 cards. All the cards are same, these contain the same text and same class name copy-pasted. I have created a div with multiple class names, and placed a heading tag and texts inside it.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to the elements. There I have used Unicode icons in CSS content command for showing the icons. Also, there I have color values to the button and texts.

jQuery handling here the main feature expand and collapse in this program. There I have stored values like ‘Read More‘, ‘Read Less‘ and animation duration in variables. Now I have created multiple functions for different conditions like open or close. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. First file for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--  Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>jQuery Expanding Read More Links | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>


<div class="container">
	<div id="content">

		<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
			<h2 class="entry-title"><a href="#">This is a blog post</a></h2> 
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet lectus et ligula sagittis blandit a eget odio. Suspendisse auctor sollicitudin justo, accumsan volutpat neque ornare molestie. Nulla augue ligula, accumsan vitae aliquam vel, viverra a ante. Phasellus porttitor interdum eleifend. Proin ac lorem eget sem interdum congue. Aenean sodales tellus non augue condimentum, sit amet porta sapien hendrerit. Etiam gravida turpis at elit placerat aliquam. Duis mattis velit vel odio adipiscing sodales. Phasellus ac aliquet enim. Aenean quis posuere libero, sit amet convallis nisl. Vestibulum commodo tincidunt urna eu commodo. Vestibulum eleifend tempus felis, in sollicitudin odio. In lacinia hendrerit risus, elementum egestas est pretium et.</p>
			</div>
		</div>

		<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
			<h2 class="entry-title"><a href="#">This is a blog post</a></h2> 
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet lectus et ligula sagittis blandit a eget odio. Suspendisse auctor sollicitudin justo, accumsan volutpat neque ornare molestie. Nulla augue ligula, accumsan vitae aliquam vel, viverra a ante. Phasellus porttitor interdum eleifend. Proin ac lorem eget sem interdum congue. Aenean sodales tellus non augue condimentum, sit amet porta sapien hendrerit. Etiam gravida turpis at elit placerat aliquam. Duis mattis velit vel odio adipiscing sodales. Phasellus ac aliquet enim. Aenean quis posuere libero, sit amet convallis nisl. Vestibulum commodo tincidunt urna eu commodo. Vestibulum eleifend tempus felis, in sollicitudin odio. In lacinia hendrerit risus, elementum egestas est pretium et.</p>
			</div>
		</div>
    
    <div class="post type-post status-publish format-standard hentry category-uncategorized entry">
			<h2 class="entry-title"><a href="#">This is a blog post</a></h2> 
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet lectus et ligula sagittis blandit a eget odio. Suspendisse auctor sollicitudin justo, accumsan volutpat neque ornare molestie. Nulla augue ligula, accumsan vitae aliquam vel, viverra a ante. Phasellus porttitor interdum eleifend. Proin ac lorem eget sem interdum congue. Aenean sodales tellus non augue condimentum, sit amet porta sapien hendrerit. Etiam gravida turpis at elit placerat aliquam. Duis mattis velit vel odio adipiscing sodales. Phasellus ac aliquet enim. Aenean quis posuere libero, sit amet convallis nisl. Vestibulum commodo tincidunt urna eu commodo. Vestibulum eleifend tempus felis, in sollicitudin odio. In lacinia hendrerit risus, elementum egestas est pretium et.</p>
			</div>
		</div>

	</div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery Expanding Read More Links | Webdevtrick.com</title>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet lectus et ligula sagittis blandit a eget odio. Suspendisse auctor sollicitudin justo, accumsan volutpat neque ornare molestie. Nulla augue ligula, accumsan vitae aliquam vel, viverra a ante. Phasellus porttitor interdum eleifend. Proin ac lorem eget sem interdum congue. Aenean sodales tellus non augue condimentum, sit amet porta sapien hendrerit. Etiam gravida turpis at elit placerat aliquam. Duis mattis velit vel odio adipiscing sodales. Phasellus ac aliquet enim. Aenean quis posuere libero, sit amet convallis nisl. Vestibulum commodo tincidunt urna eu commodo. Vestibulum eleifend tempus felis, in sollicitudin odio. In lacinia hendrerit risus, elementum egestas est pretium et.</p>

</div>

</div>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/*  Code By Webdevtrick ( https://webdevtrick.com ) */
body {
  background: #EFEFEF;
}

p {
  margin: 0 0 1.5em;
}
.container {
  max-width: 400px;
  margin: 0 auto;
}

.entry {
  position: relative;
  overflow: hidden;
  margin: 30px 0;
  padding: 20px 20px 4em 20px;
  background: #FFF;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0 0 15px #999;
}

.entry-title,
.entry-title a {
  margin-top: 0;
  font-family: Oswald, sans-serif;
  color: #333;
  text-decoration: none;
}

.entry-title a:hover {
  color: #ff0047;
}

.more-link {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 8px;
  background: #ff0047;
  color: #FFF;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 10px #000;
}

.more-link:hover {
  background: #e60023;
}

.more-link:after {
	content: "\2193";
	margin-left: 8px;
	font-size: .8em;
}

.more-link.open:after {
	content: "\2191";
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

body {

background: #EFEFEF;

}

p {

margin: 0 0 1.5em;

}

.container {

max-width: 400px;

margin: 0 auto;

}

.entry {

position: relative;

overflow: hidden;

margin: 30px 0;

padding: 20px 20px 4em 20px;

background: #FFF;

font-family: "Open Sans", sans-serif;

box-shadow: 0 0 15px #999;

}

.entry-title,

.entry-title a {

margin-top: 0;

font-family: Oswald, sans-serif;

color: #333;

text-decoration: none;

}

.entry-title a:hover {

color: #ff0047;

}

.more-link {

position: absolute;

left: 0;

bottom: 0;

display: block;

width: 100%;

padding: 8px;

background: #ff0047;

color: #FFF;

text-align: center;

text-transform: uppercase;

text-decoration: none;

font-weight: bold;

box-shadow: 0 0 10px #000;

}

.more-link:hover {

background: #e60023;

}

.more-link:after {

content: "\2193";

margin-left: 8px;

font-size: .8em;

}

.more-link.open:after {

content: "\2191";

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
$(document).ready(function() {
  var closeHeight = '10em'; 
	var moreText 	= 'Read More'; 
	var lessText	= 'Read Less';
	var duration	= '1000';
  var easing = 'linear'; 

	$('.page-template-page_blog-php #content .entry, .container #content .entry').each(function() {
		
		var current = $(this).children('.entry-content');
		current.data('fullHeight', current.height()).css('height', closeHeight);

		current.after('<a href="javascript:void(0);" class="more-link closed">' + moreText + '</a>');

	});
  
	var openSlider = function() {
		link = $(this);
		var openHeight = link.prev('.entry-content').data('fullHeight') + 'px';
		link.prev('.entry-content').animate({'height': openHeight}, {duration: duration }, easing);
		link.text(lessText).addClass('open').removeClass('closed');
    	link.unbind('click', openSlider);
		link.bind('click', closeSlider);
	}

	var closeSlider = function() {
		link = $(this);
    	link.prev('.entry-content').animate({'height': closeHeight}, {duration: duration }, easing);
		link.text(moreText).addClass('closed').removeClass('open');
		link.unbind('click');
		link.bind('click', openSlider);
	}
  
	$('.more-link').bind('click', openSlider);
  
});

// Code By Webdevtrick ( https://webdevtrick.com )

$(document).ready(function() {

var closeHeight = '10em';

var moreText = 'Read More';

var lessText = 'Read Less';

var duration = '1000';

var easing = 'linear';

$('.page-template-page_blog-php #content .entry, .container #content .entry').each(function() {

var current = $(this).children('.entry-content');

current.data('fullHeight', current.height()).css('height', closeHeight);

current.after('<a href="javascript:void(0);" class="more-link closed">' + moreText + '</a>');

});

var openSlider = function() {

link = $(this);

var openHeight = link.prev('.entry-content').data('fullHeight') + 'px';

link.prev('.entry-content').animate({'height': openHeight}, {duration: duration }, easing);

link.text(lessText).addClass('open').removeClass('closed');

link.unbind('click', openSlider);

link.bind('click', closeSlider);

}

var closeSlider = function() {

link = $(this);

link.prev('.entry-content').animate({'height': closeHeight}, {duration: duration }, easing);

link.text(moreText).addClass('closed').removeClass('open');

link.unbind('click');

link.bind('click', openSlider);

}

$('.more-link').bind('click', openSlider);

});

That’s It. Now you have successfully created jQuery Expanding Read More Link With CSS, Read More Button Expand. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

1 COMMENT

Morten December 4, 2020 At 11:49 am

Thank you for this!

I have looked everwhere for a script that does this flawless. Do you know if it affects SEO doing this?

Reply

jQuery Expanding Read More Link With CSS | Read More Button Expand

Preview Of Read More Button Expand

jQuery Expanding Read More Link Source Code

1 COMMENT

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY