jQuery UI Widget For Collapsing Long Content with Toggle Controls

Showmore is a jQuery UI widget for collapsing long block of content when the container is higher than a specific height, with 'Read more' and 'Read less' links to show / hide the collapsed content. The plugin will automatically detects the window resize event and sets the fixed height to the content area on any responsive web layout.

How to use it:

1. Include jQuery and jQuery UI JavaScript libraries on the web page.

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

2. Download the jQuery UI showmore widget and include the jquery-ui-showmore.js script after jQuery library.

<script src="src/jquery-ui-showmore.js"></script>

3. Call the function on the container where you want to collapse the overflowing content with a Show More link.

$('.content').showmore();

4. Customize the widget on initialize.

$('.content').showmore({

  // text for Read more link
  moreText: "Show More",

  // text for Read less link
  lessText: "Show Less",

  // Height of the collapsed content area
  // numeric (pixels), px's ('100px'), em's ('6em'), or 'max-height'.
  collapsedHeight: 'max-height',

  // open / close animation duration
  duration: 200, // consider migrating to animate

  // callbacks
  expand: undefined,
  collapse: undefined,

  // Built-in jQuery UI icon support
  // requires jQuery UI CSS
  showIcon: true
  
});

5. Public methods.

// refresh the plugin
$('.content').showmore('refresh');

// expand the collapsed content
$('.content').showmore('expand');

// collapse the expanded content
$('.content').showmore('collapse');

// toggle the collapsed content
$('.content').showmore('toggle');

// Returns true if the content area is expanded
// Retures false if the content area is collapsed, and undefined if controls aren't present.
$('.content').showmore('isExpanded');

// destroy the plugin
$('.content').showmore('destroy');

Change log:

2015-10-26

• JS and CSS update

---

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