jQuery Add More or Less Link into Paragraph

There are many plugin which are used for show more and less link on paragraph, but here we are showing more and less link on paragraph using jquery core that save you loading plugin time when you will use plugin for this work.

This is simple three steps coding to achieve this wonderful functionality. We are using jQuery to show/hide text and link.

You can also check other tutorial of dynamic read more Using Server side php and Mysql

We will create paragraph in html in a div.

Select Code
1
2
3
4
5
<div class="comment more">  
    consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.  
    Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.  
    Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.  
</div>

Now we will define css class for link.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
a {  
    color: #0254EB  
}  
a:visited {  
    color: #0254EB  
}  
a.morelink {  
    text-decoration:none;  
    outline: none;  
}  
.morecontent span {  
    display: none;  
}  
.comment {  
    width: 400px;  
    background-color: #f0f0f0;  
    margin: 10px;  
}

Jquery code for more and less link on click event.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(document).ready(function() {  
    var showChar = 100;  
    var ellipsestext = "…";  
    var moretext = "more";  
    var lesstext = "less";  
    $('.more').each(function() {  
        var content = $(this).html();  
  
        if(content.length > showChar) {  
  
            var c = content.substr(0, showChar);  
            var h = content.substr(showChar-1, content.length – showChar);  
  
            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';  
  
            $(this).html(html);  
        }  
  
    });  
  
    $(".morelink").click(function(){  
        if($(this).hasClass("less")) {  
            $(this).removeClass("less");  
            $(this).html(moretext);  
        } else {  
            $(this).addClass("less");  
            $(this).html(lesstext);  
        }  
        $(this).parent().prev().toggle();  
        $(this).prev().toggle();  
        return false;  
    });  
});

I hope this help you.