read more link js

Solutions on MaxInterview for read more link js by the best coders in the world

showing results for - "read more link js"

21 Oct 2020

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>jQuery Add Read More Link</title>
6<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
7<script>
8$(document).ready(function(){
9    var maxLength = 300;
10    $(".show-read-more").each(function(){
11        var myStr = $(this).text();
12        if($.trim(myStr).length > maxLength){
13            var newStr = myStr.substring(0, maxLength);
14            var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
15            $(this).empty().html(newStr);
16            $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
17            $(this).append('<span class="more-text">' + removedStr + '</span>');
18        }
19    });
20    $(".read-more").click(function(){
21        $(this).siblings(".more-text").contents().unwrap();
22        $(this).remove();
23    });
24});
25</script>
26<style>
27    .show-read-more .more-text{
28        display: none;
29    }
30</style>
31</head>
32<body>    
33    <p>This is a paragraph.</p>
34    <p>This is another paragraph.</p>
35    <p class="show-read-more">This is a very long paragraph...</p>
36</body>
37</html>

source

Lukas

13 Oct 2018

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>jQuery Add Read More Link</title>
6<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
7<script>
8$(document).ready(function(){
9	var maxLength = 300;
10	$(".show-read-more").each(function(){
11		var myStr = $(this).text();
12		if($.trim(myStr).length > maxLength){
13			var newStr = myStr.substring(0, maxLength);
14			var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
15			$(this).empty().html(newStr);
16			$(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
17			$(this).append('<span class="more-text">' + removedStr + '</span>');
18		}
19	});
20	$(".read-more").click(function(){
21		$(this).siblings(".more-text").contents().unwrap();
22		$(this).remove();
23	});
24});
25</script>
26<style>
27    .show-read-more .more-text{
28        display: none;
29    }
30</style>
31</head>
32<body>
33    <p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam, laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Etiam tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum. Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam posuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lacus et metus semper porttitor. Sed pellentesque ex at pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus dignissim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpis. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. Integer eu dignissim lectus, commodo efficitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus. Curabitur blandit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euismod, elit elit tincidunt sem, ut consectetur arcu massa non diam. Etiam scelerisque nisi magna. Nulla facilisi. Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>
34    <p>Etiam posuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lacus et metus semper porttitor. Sed pellentesque ex at pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus dignissim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpis.</p>
35    <p>Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. Integer eu dignissim lectus, commodo efficitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus. Curabitur blandit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euismod, elit elit tincidunt sem, ut consectetur arcu massa non diam. Etiam scelerisque nisi magna. Nulla facilisi. Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>
36</body>
37</html>

source

queries leading to this page

js read more link read more link js