Jquery read more toggle

JQuery Toggle with Read More... :-   In the following example, we will use some tricks that tells how can we use JQuery Toggle() function in READ MORE option. Firstly you add JQuery library file (jquery-1.12.4.min.js), if already added then ignor it.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Thenafter just add the following JQUERY Script.

<script type="text/javascript">

$(document).ready(function () {
    var showChar = 100;
    var ellipsestext = "...";
    var moretext = "Show More";
    var lesstext = "Show Less";
    $('.more').each(function () {
        var content = $(this).html();
        if (content.length > showChar) {
            var varA_1 = content.substr(0, showChar);
            var varA_2 = content.substr(showChar - 1, content.length - showChar);
            var html = varA_1 + '<span class="moreelipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + varA_2 + '</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().slideToggle(700);
        $(this).prev().slideToggle(700);
        return false;

        /*you may also use the following toggling methods
       
        Method.1==>
            $(this).parent().prev().toggle(700);
            $(this).prev().toggle(700);
            return false;
        */
          /*Method.1==>
            $(this).parent().prev().fadeToggle(700);
            $(this).prev().fadeToggle(700);
            return false;
        */

    });
});