Toggle Long Text Block With Smooth Animations - dReadmore

Toggle Long Text Block With Smooth Animations - dReadmore
File Size: 13.3 KB
Views Total: 3934
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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. 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)
      },
      
});

8. Destroy the instance.

dreadmore.destroy();

Changelog:

v2.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.