Toggle Long Text Block With Smooth Animations - dReadmore

dReadmore is a small yet configurable jQuery JavaScript Read More/Read Less plugin for post excerpts, article descriptions, long text blocks, etc.

The plugin automatically hides the overflowing text content and generates More/Less buttons that allow the user to reveal the full text with smooth, configurable sliding animations.

How to use it:

1. Add your long text together with a read more button to the page.

<!-- Text To Collapse & Expand -->
<div class="dreadmore">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit recusandae quas eaque laudantium quo, dolorem vitae quia cupiditate sit, exercitationem suscipit molestiae iste dolores eos facere mollitia voluptatibus nihil. Dicta ex blanditiis officiis beatae similique neque nostrum consequatur maiores quas!
</div>

<!-- Toggle Link -->
<button type="button"
        data-drm-toggler>
        Show More
</button>

2. Add a line-height to the text block and specify the number of lines of text to persist using the min-height property.

.d-readmore {
  line-height: 1.8;
  min-height: 7px;
  overflow: hidden;
}

3. Hide the toggle link when the text is expanded.

.dreadmore--disabled {
  display: none;
}

4. Initialize the plugin on the text block and done.

const dreadmore = new DReadMore({
      // options here
});

5. Customize the text for the Read More & Read Less buttons.

<button type="button"
  data-drm-toggler="drmKeyToggler"
  data-drm-toggler-more="Show more custom"
  data-drm-toggler-less="Close custom">
  Show more custom
</button>

// OR Via JavaScript
const dreadmore = new DReadMore({
      moreText: "Show more",
      lessText: "Close"
});

6. Determine whether to expand the text on page load & window resize. Default: false.

const dreadmore = new DReadMore({
      initialExpand: true,
      isInitialExpandWhenUpdate: true,
});

7. Customize the toggle button.

<div class="dreadmore" data-drm="toggler: drmKeyToggler">
  ...
</div>
<button type="button" data-drm-toggler="drmKeyToggler">Show more</button>

// OR VIA JAVASCRIPT
const dreadmore = new DReadMore({
      toggler: 'drmKeyToggler'
});

8. Execute callback functions after before/toggling.

const dreadmore = new DReadMore({

      beforeToggle: function($element, expanded) {
        console.log($element, expanded)
      },

      afterToggle: function($element, expanded) {
        console.log($element, expanded)
      },
      
});

9. Destroy the instance.

dreadmore.destroy();

10. Update the instance.

window.addEventListener('resize', function() {
  dreadmore.forEach(function(item) {
    item.update();
  });
});

Changelog:

v2.2.1 (2022-09-12)

• Add: the ability to specify text in buttons via attributes (data-drm-toggler-more and data-drm-toggler-less).

v2.2.0 (2022-09-05)

• Add: the ability to specify a toggle in the attribute (data-drm="toggler: drmKeyToggler"), you will also need to specify the attribute (data-rdm-toggler="drmKeyToggler") in the toggle

v2.1.6 (2022-08-23)

• Fix: min-height is not working correctly when applying dReadMore to an element which contains more then one <p> tag.

v2.1.0 (2022-01-11)

• Removed jQuery dependencies.
• Updated methods and parameters.

---

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