Hide/Reveal Long Text On Demand - jQuery MoreContent

The MoreContent jQuery plugin automatically cuts off long text content within a container and reveals/hides them with a smooth toggle animation when needed.

Features:

• Hides long content when exceeding the max height.
• Fully responsive and works perfectly on window resize.
• Custom Read More and Read Less buttons.
• Custom trigger event. Default: 'Click'.
• Shadow effect on exceeded content.
• Custom easing functions. 
• Useful API methods.

How to use it:

1. Insert both jQuery JavaScript library and the MoreContent plugin into the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.morecontent.js"></script>

2. Call the function on the text container and done. By default the plugin will automatically hide exceeded text when the container is higher than 175px.

<div class="example">
  Long Text Here
</div>

$('.example').moreContent();

3. Set the maximum height to trigger the Hide behavior. Default: '175'.

$('.example').moreContent({
  height: 200
});

4. Customize the trigger event to toggle the full content. Default: 'Click'.

$('.example').moreContent({
  event: 'mouseover'
});

5. Apply a shadow effect to the exceeded content. Default: 'false'.

$('.example').moreContent({
  shadow: true
});

6. Apply an easing effect to the toggle animation. You might need a 3rd easing library for extra easing functions. E.g. jQuery UI and jQuery easing plugin.

$('.example').moreContent({
  easing: 'easeOutBounce'
});

7. Customize the text for the read more and read less buttons.

$('.example').moreContent({
  textClose: 'Show More',
  textOpen: 'Close'
});

8. More configuration options.

$('.example').moreContent({
  useCss: true,
  speed: 250,
  tpl: {
    content: '<div class="mrc-content"></div>',
    contentWrap: '<div class="mrc-content-wrap"></div>',
    btn: '<button class="mrc-btn" type="button"></button>',
    btnWrap: '<div class="mrc-btn-wrap"></div>',
    controls: '<div class="mrc-controls"></div>',
    shadow: '<div class="mrc-shadow"></div>',
  }
});

9. API methods available.

// re-init the instance
$('.example').moreContent('reinit');

// hide the content
$('.example').moreContent('close');

// reveal the content
$('.example').moreContent('Open');

// toggle the content
$('.example').moreContent('toggle');

// show some content
$('.example').moreContent('drop');

// destroy the plugin
$('.example').moreContent('destroy');

10. Event handlers.

instance.on('beforeInitSwitch.mrc', function(e, inst, sets) {
  // console.log( 'change', inst.mode, inst.status );

  // inst.layout.drop = $('<button type="button">Показать больше</button>')
  // .on('click', function() {
  //  inst.layout.self.moreContent('drop', 15, '%');
  // }).appendTo(inst.layout.controls).hide();

  // inst.layout.progress = $('<div></div>')
  //  .insertBefore(inst.layout.content);
});

instance.on('change.mrc', function(e, inst, sets) {
  // console.log( 'change', inst.mode, inst.status );

  // if( inst.layout.drop ) {

  //  if( !inst.mode || inst.status ) {
  //    inst.layout.drop.fadeOut(sets.speed);
  //  } else {
  //    inst.layout.drop.fadeIn(sets.speed);
  //  }

  // }

  // if( inst.layout.progress ) {
  //  inst.layout.progress.text(Math.ceil(inst.curHeight/(inst.fullHeight/100)) + '%');
  // }

  // inst.manually = true;

  // content.animate({
  //  height: height
  // }, 1500, function() {
  //  inst.afterChange('open');
  // });
});

instance.on('beforeOpen.mrc', function(e, inst, sets, content, height) {
  // console.log( 'beforeOpen', height );

  // inst.manually = true;

  // content.animate({
  //  height: height
  // }, 1000, 'easeOutBounce', function() {
  //  inst.afterChange('open');
  // });
});

instance.on('beforeClose.mrc', function(e, inst, sets, content, height) {
  // console.log( 'beforeClose', height );

  // inst.manually = true;

  // content.animate({
  //  // opacity: 1,
  //  height: height
  // }, 1000, 'easeOutBounce', function() {
  //  inst.afterChange('close');
  // });
});

instance.on('beforeDrop.mrc', function(e, inst, sets, content, height) {
  // console.log( inst.layout.btn.addClass('animated shake') );

  // console.log( 'beforeDrop', height );

  // inst.manually = true;

  // content.animate({
  //  // opacity: 1,
  //  height: height
  // }, 1000, 'easeOutBounce', function() {
  //  inst.afterChange('drop');
  // });

});

instance.on('afterDrop.mrc', function(e, inst, sets, content) {});
instance.on('afterOpen.mrc', function(e, inst, sets, content) {});
instance.on('afterOpen.mrc', function(e, inst, sets, content) {});

---

This awesome jQuery plugin is developed by WahaWaher. For more Advanced Usages, please check the demo page or visit the official website.