jQuery Plugin To Show/Hide Block Elements - Block Ellipsis

File Size: 20.9 KB
Views Total: 1873
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Show/Hide Block Elements - Block Ellipsis

Block Ellipsis is a jQuery plugin used to truncate a list of inline elements to a specified number of lines / blocks so the visitor can collapse and expand the blocks with "Show More" and "Show Less" links.

How to use it:

1. Load jQuery library and the jQuery block ellipsis plugin at the bottom of the document.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="dist/block_ellipsis.js"></script>

2. Insert a list of inline block elements into a container.

<div class="demo">

3. Call the plugin on the container and set the minimum amount of lines / blocks you want to display.

  lines: 2,
  min_blocks: 5

4. Full plugin options with default value.


// Amount of lines you want to display
lines: 1,

// Minimum amount of blocks you want to display (useful for responsive)
min_blocks: 0,

// The HTML to display your 'Show more' clickable element.
// You can either use a string, or a function that will take the number of
// remaining blocks as a parameter
more: function (nb) {
  return '<span class="more">Show ' + nb + ' more</span>';

// Insert a space before 'Show more' and 'Show less' blocks.
// This is useful because a space between `inline-block` elements is displayed.
// If your elements are floated, this won't change anything.
space_before_blocks: true,

// The HTML to display your 'Show less' clickable element.
less: '<span class="less">Show less</span>',

// CSS rules to apply once the changes are done (avoids flickering)
css: {
  visibility: 'visible',
  overflow: 'visible'

// Enables debug features
debug: false


Change log:

v1.0.4 (2015-05-07)

  • Added preventDefault to click events

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