jquery.readmore.js

/*
|----------------------------------------------
| ReadMore Jquery Plugin
|----------------------------------------------
|
| Created by Cuong Huynh
|
*/

(function($) {

    $.fn.readMore = function(method) {
        var self = this;

        var methods = {

            init : function(options) {
                self.readMore.settings = $.extend({}, self.readMore.defaults, options);

                return self.each(function() {
                    var $element = $(this), // reference to the jQuery version of the current DOM element
                        element = this;      // reference to the actual DOM element
                    
                    helpers.handleReadMore($element);
                    helpers.handleJsReadMoreLink($element);
                });

            },
        }

        var helpers = {
            handleReadMore: function ($element) {
                var content = $element.html();

                if (content.length > self.readMore.settings.limit) {
                    var showedContent = content.substr(0, self.readMore.settings.limit);
                    var hiddenContent = content.substr(self.readMore.settings.limit, content.length - self.readMore.settings.limit);
                    var html = showedContent + '<span class="more-ellipsis">' + self.readMore.settings.ellipsis_text + '</span>';
                    html += '<span class="more-content"><span style="display: none;">' + hiddenContent + '</span>';
                    html += ' <a href="" class="jsReadMoreLink">' + self.readMore.settings.more_text + '</a></span>';
                    console.log(html);
                    $element.html(html);
                }
            },

            handleJsReadMoreLink: function ($element) {
                $element.on('click', '.jsReadMoreLink', function(event) {
                    event.preventDefault();
                    
                    if ($(this).hasClass('less')) {
                        $(this).removeClass('less');
                        $(this).html(self.readMore.settings.more_text);
                    } else {
                        $(this).addClass("less");
                        $(this).html(self.readMore.settings.less_text);
                    }

                    $(this).parent().prev().toggle();
                    $(this).prev().toggle();
                    return false;
                });
            }
        }

        if (methods[method]) {
            return methods[method].apply(self, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(self, arguments);
        } else {
            $.error( 'Method "' +  method + '" does not exist in readMore plugin!');
        }

    }

    $.fn.readMore.defaults = {
        limit: 100,
        more_text: 'Read More',
        less_text: 'Show Less',
        ellipsis_text: '...'
    }

    $.fn.readMore.settings = {}

})(jQuery);