Mobile-compatible Read More/Read Less Plugin - jQuery Showmore

File Size: 25 KB
Views Total: 2295
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Mobile-compatible Read More/Read Less Plugin - jQuery Showmore

Showmore is a lightweight, mobile-compatible jQuery read more/read less plugin for long web content.

The plugin limits your web content and creates custom show more/show less buttons to toggle the content when it exceeds a certain height.

Smooth open/close animations are based on CSS3 transitions.

How to use it:

1. Insert the minified version of the jQuery Showmore plugin after jQuery.

<script src="" 
<script src="dist/jquery.showmore.min.js"></script>

2. Call the function on the target container and specify the closedHeight you want to use (Default: 100px).

  closedHeight: 50,
  buttonTextMore: 'Show more'

3. Customize the read more/read less buttons.

  buttonTextMore: 'show more',
  buttonTextLess: 'show less',
  buttonCssClass: 'showmore-button'

4. Customize animation speed in seconds.

  animationSpeed: 0.5

5. Make this plugin work only at a certain screen width (Default: 0).

  onlyWithWindowMaxWidth: 768

6. Set the offset in pixels.

  openHeightOffset: 0

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