jQuery Plugin For SEO Friendly Hiding of Long Text - moreContent.js

moreContent.js is a jQuery plugin that hides (collapses) overflowing content and generates a toggle button at the end of the container. Click on the toggle button to expand the hidden content with a smooth sliding animation based on Velocity.js JavaScript animation engine. Also provides an ability to blur the last line of your truncated text with a mask DIV.

How to use it:

1. Include the necessary jQuery library and velocity.js in your web page.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>

2. Include the jQuery moreContent.js script after jQuery JavaScript library.

<script src="jquery.morecontent.js"></script>

3. Wrap your long content into a container element and pass the plugin options via Html5 data-* attributes.

• data-height="160": set height for element
• data-duration="1000": set duration for animation
• data-btn="Open": set default toggle button text
• data-btn-active="Close": set active toggle button text
• data-btn-class="btn-default": change toggle button class

<div class="moreContent" data-height="200">
  Content here
</div>

4. The sample CSS to style the toggle button and the mask layer.

.moreContent {
  padding: 20px;
  position: relative;
}

.moreContent:after {
  content: "";
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.moreContent.active:after { height: 0; }
 [class*="btn-"] {
 background: transparent;
 color: inherit;
 font: inherit;
 border: none;
 outline: none;
 cursor: pointer;
 transition: all 200ms ease-in-out;
}

.btn-default {
  background-color: #2ecc71;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  padding: 12px 0;
  margin-top: 1em;
}

.btn-default.active { background-color: #e74c3c; }

5. Initialize the plugin on the parent container and the plugin will take care of the rest.

$(document).ready(function() {
  $('.moreContent').moreContent();
});

6. You can also pass the plugin options via JS object.

$(document).ready(function() {
  $('.moreContent').moreContent({
    height: 160,
    duration: 1000,
    btn: 'Open',
    btnActive: 'Close',
    btnClass: 'btn-default'
});
});

Change log:

2014-11-22

• v1.0.1

---

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