Bootstrap Snippet Show More Content on Click using HTML Javascript

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h2>This is free script from webenlance</h2>
    </div>
    
    <p class="comment">
Dr. Anil Kohli is an Endodontist, Dental Surgeon and Dentist in Lajpat Nagar, Delhi and has an experience of 40 years in these fields. Dr. Anil Kohli practices at Duis nisl nibh, egestas at fermentum at, viverra et purus. Maecenas lobortis odio id sapien facilisis elementum. Curabitur et magna justo, et gravida augue. Sed tristique pellentesque arcu quis tempor. Duisds nisl nibh, egestas at fermentum at, viverra et purus. Maecenas lobortis odio id sapien facilisis elementum. chickenCurabitur et magna justo, et gravida augue. Sed tristique pellentesque arcu quis tempor.  Duisds nisl nibh, egestas at fermentum at, viverra et purus. Maecenas lobortis odio id sapien facilisis elementum. chickenCurabitur et magna justo, et gravida augue. Sed tristique pellentesque arcu quis tempor.  Duisds nisl nibh, egestas at fermentum at, viverra et purus. Maecenas lobortis odio id sapien facilisis elementum. chickenCurabitur et magna justo, et gravida augue. Sed tristique pellentesque arcu quis tempor.  
</p>
    
    
    
    
    <script language="javascript">
$(document).ready(function() {
    
    $(".comment").shorten();
    
    $(".comment-small").shorten({showChars: 10});
 });
</script>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
34
35
36
37
(function($) {
    $.fn.shorten = function(settings) {
        "use strict";
        var config = {
            showChars: 100,
            minHideChars: 10,
            ellipsesText: "...",
            moreText: "Read More",
            lessText: "less",
            onLess: function() {},
            onMore: function() {},
            errMsg: null,
            force: false
        };
        if (settings) {
            $.extend(config, settings);
        }
        if ($(this).data('jquery.shorten') && !config.force) {
            return false;
        }
        $(this).data('jquery.shorten', true);
        $(document).off("click", '.morelink');
        $(document).on({
            click: function() {
                var $this = $(this);
                if ($this.hasClass('less')) {
                    $this.removeClass('less');
                    $this.html(config.moreText);
                    $this.parent().prev().animate({'height':'0'+'%'}, function () { $this.parent().prev().prev().show(); }).hide('fast', function() {
                        config.onLess();
                      });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Show More Content on Click"
Bootstrap 3.3.0 Snippet by webenlance

Related: See More

Questions / Comments:

"Show More Content on Click" Bootstrap 3.3.0 Snippet by webenlance

Related: See More

Questions / Comments:

"Show More Content on Click"
Bootstrap 3.3.0 Snippet by webenlance