Bootstrap Snippet max length text read more and read less using HTML CSS Bootstrap jQuery

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="main_container">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Bootstrap Custom max length text read more and read less</h3>
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <div class="Data_Group">
                                <p class="item">
                                    Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text
                                    Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your
                                    Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here
                                    Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text
                                    Here Your Text Here Your Text Here Your Text Here
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
.main_container{
    margin: 80px auto;
}
.main_container .row{
    display: flex;
    align-items: center;
    justify-content: center;
}
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(){ /* to make sure the script runs after page load */
    $('.item').each(function(event){ /* select all divs with the item class */
      var max_length = 150; /* set the max content length before a read more link will be added */
      if($(this).html().length > max_length){ /* check for content length */
        var short_content   = $(this).html().substr(0,max_length); /* split the content in two parts */
        var long_content  = $(this).html().substr(max_length);
        $(this).html(short_content+'<a href="#" class="read_more">Show More</a>'+
               '<span class="more_text" style="display:none;">'+long_content+'</span>'+'<a href="#" class="read_less" style="display:none;">Show Less</a>'); /* Alter the html to allow the read more functionality */
        $(this).find('a.read_more').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */
          event.preventDefault(); /* prevent the a from changing the url */
          $(this).hide(); /* hide the read more button */
          $('.read_less').show(); /* show read less button */
          $(this).parents('.item').find('.more_text').show(); /* show the .more_text span */
        });
        $(this).find('a.read_less').click(function(event){ 
          event.preventDefault();
          $(this).hide(); /* hide the read more button */
          $('.read_less').hide();
          $('.read_more').show();
          $(this).parents('.item').find('.more_text').hide();
        });
      }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"max length text read more and read less"
Bootstrap 3.1.0 Snippet by shehzadali110

Related: See More

Questions / Comments:

"max length text read more and read less" Bootstrap 3.1.0 Snippet by shehzadali110

Related: See More

Questions / Comments:

"max length text read more and read less"
Bootstrap 3.1.0 Snippet by shehzadali110