Moose Loose WordPress & Web Desigh Tools

HTML

<article>
<b class="heading">Artisanal Narwahls</b>

<P>This is the Collapsable Read More page and you are looking at filler Text. It will be replaced when content is received. Duis interdum egestas ante et imperdiet. Cras felis odio, pretium et lobortis ac, dapibus eu velit. Pellentesque vehicula porta scelerisque. Vivamus 2015/01/07-23:01 nec ligula est. Suspendisse Collapsable Read More ac consequat leo.</P>

<P>Aoccdrnig to a rscheearch at an Elingsh uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht frist and lsat ltteer is at the rghit pclae. The rset can be a toatl mses and you can sitll raed it wouthit porbelm. Tihs is bcuseae we do not raed ervey lteter by itslef but the wrod as a wlohe.</P>

<strong>This Has Been Created by MooseLoose</strong>

<P>Donec mattis justo at Collapsable Read More dolor sagittis varius iaculis ligula pretium. Morbi ornare purus sit amet Collapsable Read More augue iaculis a volutpat mauris lobortis. Quisque nunc elit, euismod id vestibulum quis, laoreet vitae leo, Collapsable Read More <b>2015/01/07-23:01</b> - MooseLoose.</P> </article>

<article>
<b class="heading">Artisanal Narwahls</b>

<strong>This Has Been Created by MooseLoose</strong>

<article>
<b class="heading">Artisanal Narwahls</b>

<strong>This Has Been Created by MooseLoose</strong>

</section>
</div>

$('article').readmore({speed: 1000});
</script>
<style>
article{
background:#fff;
font-family:sans-serif;
}
</style>

readmore.js

(function($) {
'use strict';

var readmore = 'readmore',
     defaults = {
       speed: 100,
       collapsedHeight: 25,
       heightMargin: 20,
       moreLink: '<a class="readmore" href="#">Get Code</a>',
       lessLink: '<a class="close" href="#">Close</a>',
       embedCSS: true,
       blockCSS: 'display: block; width: 100%;',
       startOpen: false,

       // callbacks
       beforeToggle: function(){},
       afterToggle: function(){}
     },
     cssEmbedded = {},
     uniqueIdCounter = 0;

function debounce(func, wait, immediate) {
var timeout;

   return function() {
     var context = this, args = arguments;
     var later = function() {
       timeout = null;
       if (! immediate) {
         func.apply(context, args);
       }
     };
     var callNow = immediate && !timeout;

clearTimeout(timeout);
timeout = setTimeout(later, wait);

     if (callNow) {
       func.apply(context, args);
     }
   };
}

function uniqueId(prefix) {
var id = ++uniqueIdCounter;

return String(prefix == null ? 'rmjs-' : prefix) + id;
}

function setBoxHeights(element) {
   var el = element.clone().css({
         height: 'auto',
         width: element.width(),
         maxHeight: 'none',
         overflow: 'hidden'
       }).insertAfter(element),
       expandedHeight = el.outerHeight(),
       cssMaxHeight = parseInt(el.css({maxHeight: ''}).css('max-height').replace(/[^-\d\.]/g, ''), 10),
       defaultHeight = element.data('defaultHeight');

el.remove();

var collapsedHeight = element.data('collapsedHeight') || defaultHeight;

   if (!cssMaxHeight) {
     collapsedHeight = defaultHeight;
   }
   else if (cssMaxHeight > collapsedHeight) {
     collapsedHeight = cssMaxHeight;
   }

   element.data({
     expandedHeight: expandedHeight,
     maxHeight: cssMaxHeight,
     collapsedHeight: collapsedHeight
   })
   .css({
     maxHeight: 'none'
   });
}

var resizeBoxes = debounce(function() {
   $('[data-readmore]').each(function() {
     var current = $(this),
         isExpanded = (current.attr('aria-expanded') === 'true');

setBoxHeights(current);

     current.css({
       height: current.data( (isExpanded ? 'expandedHeight' : 'collapsedHeight') )
     });
   });
}, 100);

function embedCSS(options) {
if (! cssEmbedded[options.selector]) {
var styles = ' ';

     if (options.embedCSS && options.blockCSS !== '') {
       styles += options.selector + ' + [data-readmore-toggle], ' +
         options.selector + '[data-readmore]{' +
           options.blockCSS +
         '}';
     }

     styles += options.selector + '[data-readmore]{' +
       'transition: height ' + options.speed + 'ms;' +
       'overflow: hidden;' +
     '}';

     (function(d, u) {
       var css = d.createElement('style');
       css.type = 'text/css';

       if (css.styleSheet) {
         css.styleSheet.cssText = u;
       }
       else {
         css.appendChild(d.createTextNode(u));
       }

d.getElementsByTagName('head')[0].appendChild(css);
}(document, styles));

cssEmbedded[options.selector] = true;
}
}

function Readmore(element, options) {
var $this = this;

this.element = element;

this.options = $.extend({}, defaults, options);

   $(this.element).data({
     defaultHeight: this.options.collapsedHeight,
     heightMargin: this.options.heightMargin
   });

embedCSS(this.options);

this._defaults = defaults;
this._name = readmore;

   window.addEventListener('load', function() {
     $this.init();
   });
}

Readmore.prototype = {
init: function() {
var $this = this;

$(this.element).each(function() {
var current = $(this);

setBoxHeights(current);

var collapsedHeight = current.data('collapsedHeight'),
heightMargin = current.data('heightMargin');

       if (current.outerHeight(true) <= collapsedHeight + heightMargin) {
         return true;
       }
       else {
         var id = current.attr('id') || uniqueId(),
             useLink = $this.options.startOpen ? $this.options.lessLink : $this.options.moreLink;

         current.attr({
           'data-readmore': '',
           'aria-expanded': false,
           'id': id
         });

         current.after($(useLink)
           .on('click', function(event) { $this.toggle(this, current[0], event); })
           .attr({
             'data-readmore-toggle': '',
             'aria-controls': id
           }));

         if (! $this.options.startOpen) {
           current.css({
             height: collapsedHeight
           });
         }
       }
     });

     window.addEventListener('resize', function() {
       resizeBoxes();
     });
   },

   toggle: function(trigger, element, event) {
     if (event) {
       event.preventDefault();
     }

     if (! trigger) {
       trigger = $('[aria-controls="' + this.element.id + '"]')[0];
     }

     if (! element) {
       element = this.element;
     }

     var $this = this,
         $element = $(element),
         newHeight = '',
         newLink = '',
         expanded = false,
         collapsedHeight = $element.data('collapsedHeight');

     if ($element.height() <= collapsedHeight) {
       newHeight = $element.data('expandedHeight') + 'px';
       newLink = 'lessLink';
       expanded = true;
     }
     else {
       newHeight = collapsedHeight;
       newLink = 'moreLink';
     }

$this.options.beforeToggle(trigger, element, ! expanded);

$element.css({'height': newHeight});

$element.on('transitionend', function() {
$this.options.afterToggle(trigger, element, expanded);

       $(this).attr({
         'aria-expanded': expanded
       }).off('transitionend');
     });

     $(trigger).replaceWith($($this.options[newLink])
         .on('click', function(event) { $this.toggle(this, element, event); })
         .attr({
           'data-readmore-toggle': '',
           'aria-controls': $element.attr('id')
         }));
   },

   destroy: function() {
     $(this.element).each(function() {
       var current = $(this);

       current.attr({
         'data-readmore': null,
         'aria-expanded': null
       })
         .css({
           maxHeight: '',
           height: ''
         })
         .next('[data-readmore-toggle]')
         .remove();

       current.removeData();
     });
   }
};

$.fn.readmore = function(options) {
var args = arguments,
selector = this.selector;

options = options || {};

   if (typeof options === 'object') {
     return this.each(function() {
       if ($.data(this, 'plugin_' + readmore)) {
         var instance = $.data(this, 'plugin_' + readmore);
         instance.destroy.apply(instance);
       }

options.selector = selector;

       $.data(this, 'plugin_' + readmore, new Readmore(this, options));
     });
   }
   else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
     return this.each(function () {
       var instance = $.data(this, 'plugin_' + readmore);
       if (instance instanceof Readmore && typeof instance[options] === 'function') {
         instance[options].apply(instance, Array.prototype.slice.call(args, 1));
       }
     });
   }
};

})(jQuery);