PHPackages                             fabianobn/readmore.js - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. fabianobn/readmore.js

ActiveLibrary[Utility & Helpers](/categories/utility)

fabianobn/readmore.js
=====================

This is the Readmore.JS of author Jedfoster

v2.2.2.x-dev(7y ago)18HTML

Since Aug 10Pushed 7y ago1 watchersCompare

[ Source](https://github.com/fabianobn/Readmore.js)[ Packagist](https://packagist.org/packages/fabianobn/readmore.js)[ RSS](/packages/fabianobn-readmorejs/feed)WikiDiscussions master Synced yesterday

READMEChangelog (1)DependenciesVersions (2)Used By (0)

Readmore.js
===========

[](#readmorejs)

A smooth, responsive jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.

The markup Readmore.js requires is so simple, you can probably use it with your existing HTML—there's no need for complicated sets of `div`'s or hardcoded classes, just call `.readmore()` on the element containing your block of text and Readmore.js takes care of the rest. Readmore.js plays well in a responsive environment, too.

Readmore.js is tested with—and supported on—all versions of jQuery greater than 1.9.1. All the "good" browsers are supported, as well as IE10+; IE8 & 9 *should* work, but are not supported and the experience will not be ideal.

Install
-------

[](#install)

Install Readmore.js with npm:

```
$ npm install readmore-js

```

Then include it in your HTML:

```

```

Or, using Webpack or Browserify:

```
require('readmore-js');
```

Use
---

[](#use)

```
$('article').readmore();
```

It's that simple. You can change the speed of the animation, the height of the collapsed block, and the open and close elements.

```
$('article').readmore({
  speed: 75,
  lessLink: 'Read less'
});
```

### The options:

[](#the-options)

- `speed: 100` in milliseconds
- `collapsedHeight: 200` in pixels
- `heightMargin: 16` in pixels, avoids collapsing blocks that are only slightly larger than `collapsedHeight`
- `moreLink: 'Read more'`
- `lessLink: 'Close'`
- `embedCSS: true` insert required CSS dynamically, set this to `false` if you include the necessary CSS in a stylesheet
- `blockCSS: 'display: block; width: 100%;'` sets the styling of the blocks, ignored if `embedCSS` is `false`
- `startOpen: false` do not immediately truncate, start in the fully opened position
- `beforeToggle: function() {}` called after a more or less link is clicked, but *before* the block is collapsed or expanded
- `afterToggle: function() {}` called *after* the block is collapsed or expanded
- `blockProcessed: function() {}` called once per block during initilization after Readmore.js has processed the block.

If the element has a `max-height` CSS property, Readmore.js will use that value rather than the value of the `collapsedHeight` option.

### The callbacks:

[](#the-callbacks)

The `beforeToggle` and `afterToggle` callbacks both receive the same arguments: `trigger`, `element`, and `expanded`.

- `trigger`: the "Read more" or "Close" element that was clicked
- `element`: the block that is being collapsed or expanded
- `expanded`: Boolean; `true` means the block is expanded

The `blockProcessed` callback receives `element` and `collapsable`.

- `element`: the block that has just been processed
- `collapsable`: Boolean; `false` means the block was shorter than the specified minimum `collapsedHeight`--the block will not have a "Read more" link

#### Callback example:

[](#callback-example)

Here's an example of how you could use the `afterToggle` callback to scroll back to the top of a block when the "Close" link is clicked.

```
$('article').readmore({
  afterToggle: function(trigger, element, expanded) {
    if(! expanded) { // The "Close" link was clicked
      $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
    }
  }
});
```

### Removing Readmore:

[](#removing-readmore)

You can remove the Readmore.js functionality like so:

```
$('article').readmore('destroy');
```

Or, you can be more surgical by specifying a particular element:

```
$('article:first').readmore('destroy');
```

### Toggling blocks programmatically:

[](#toggling-blocks-programmatically)

You can toggle a block from code:

```
$('article:nth-of-type(3)').readmore('toggle');
```

CSS:
----

[](#css)

Readmore.js is designed to use CSS for as much functionality as possible: collapsed height can be set in CSS with the `max-height` property; "collapsing" is achieved by setting `overflow: hidden` on the containing block and changing the `height` property; and, finally, the expanding/collapsing animation is done with CSS3 transitions.

By default, Readmore.js inserts the following CSS, in addition to some transition-related rules:

```
selector + [data-readmore-toggle], selector[data-readmore] {
  display: block;
  width: 100%;
}
```

*`selector` would be the element you invoked `readmore()` on, e.g.: `$('selector').readmore()`*

You can override the base rules when you set up Readmore.js like so:

```
$('article').readmore({blockCSS: 'display: inline-block; width: 50%;'});
```

If you want to include the necessary styling in your site's stylesheet, you can disable the dynamic embedding by setting `embedCSS` to `false`:

```
$('article').readmore({embedCSS: false});
```

### Media queries and other CSS tricks:

[](#media-queries-and-other-css-tricks)

If you wanted to set a `maxHeight` based on lines, you could do so in CSS with something like:

```
body {
  font: 16px/1.5 sans-serif;
}

/* Show only 4 lines in smaller screens */
article {
  max-height: 6em; /* (4 * 1.5 = 6) */
}
```

Then, with a media query you could change the number of lines shown, like so:

```
/* Show 8 lines on larger screens */
@media screen and (min-width: 640px) {
  article {
    max-height: 12em;
  }
}
```

Contributing
------------

[](#contributing)

Pull requests are always welcome, but not all suggested features will get merged. Feel free to contact me if you have an idea for a feature.

Pull requests should include the minified script and this readme and the demo HTML should be updated with descriptions of your new feature.

You'll need NPM:

```
$ npm install

```

Which will install the necessary development dependencies. Then, to build the minified script:

```
$ npm run build

```

###  Health Score

23

—

LowBetter than 26% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity6

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 86.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

2881d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/5238462?v=4)[Fabiano Alencar](/maintainers/fabianobn)[@fabianobn](https://github.com/fabianobn)

---

Top Contributors

[![jedfoster](https://avatars.githubusercontent.com/u/79984?v=4)](https://github.com/jedfoster "jedfoster (116 commits)")[![kaaloo](https://avatars.githubusercontent.com/u/67010?v=4)](https://github.com/kaaloo "kaaloo (6 commits)")[![fabianobn](https://avatars.githubusercontent.com/u/5238462?v=4)](https://github.com/fabianobn "fabianobn (6 commits)")[![kmark](https://avatars.githubusercontent.com/u/1046198?v=4)](https://github.com/kmark "kmark (2 commits)")[![stelioschar](https://avatars.githubusercontent.com/u/1840002?v=4)](https://github.com/stelioschar "stelioschar (1 commits)")[![chriskief](https://avatars.githubusercontent.com/u/673553?v=4)](https://github.com/chriskief "chriskief (1 commits)")[![nmatpt](https://avatars.githubusercontent.com/u/5034733?v=4)](https://github.com/nmatpt "nmatpt (1 commits)")[![arusahni](https://avatars.githubusercontent.com/u/139487?v=4)](https://github.com/arusahni "arusahni (1 commits)")

### Embed Badge

![Health badge](/badges/fabianobn-readmorejs/health.svg)

```
[![Health](https://phpackages.com/badges/fabianobn-readmorejs/health.svg)](https://phpackages.com/packages/fabianobn-readmorejs)
```

###  Alternatives

[alirahimi/livewire-persian-datepicker

The Persian Datepicker component for Laravel Livewire

285.6k](/packages/alirahimi-livewire-persian-datepicker)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)