Toggle Long Text Block With Smooth Animations - dReadmore

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

dReadmore is a small yet configurable jQuery 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 dReadmore wrapper.

<div class="d-readmore-wrapp">
  <div class="d-readmore">Phasellus eu leo rhoncus, cursus erat id, volutpat nisl. Proin sed laoreet felis. Aenean sollicitudin dictum augue, non scelerisque nulla cursus vitae. Mauris molestie, tellus sed vehicula ultricies, ex arcu semper nibh, eu malesuada turpis metus a orci. Pellentesque consequat, tortor sit amet hendrerit ornare, mi erat ultricies eros, placerat auctor lacus erat a tortor. Nullam suscipit velit libero. In facilisis eros nibh, vitae rhoncus nisl fringilla at. Aliquam auctor posuere dolor, eu dignissim augue efficitur non. Aliquam eu aliquam mi, vel malesuada justo. Praesent dictum, arcu eu convallis accumsan, neque turpis convallis elit, nec lacinia neque tortor id mauris. Fusce in augue at mi lobortis accumsan sit amet id tortor. Quisque placerat justo id neque dictum, vel auctor risus rutrum. Nam tincidunt ultricies urna ut pellentesque. Maecenas a molestie lorem. Aliquam vitae tincidunt odio.</div>
  <span class="d-readmore_btn"></span>
</div>

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. Apply your own CSS styles to the Read More and Read Less buttons.

.d-readmore_btn { 
  border-bottom: 2px dashed #000; 
  color: #ff0000; 
}

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

$(function(){
  $(".d-readmore").dReadmore();
});

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

$(".d-readmore").dReadmore({
  moreText: "Show more",
  lessText: "Close"
});

6. Config the toggle animation.

$(".d-readmore").dReadmore({
  duration: 250,
  timing: "ease"
});

7. Execute callback functions after before/toggling.

$(".d-readmore").dReadmore({
  beforeToggle: function($element, expanded) {
    if (!expanded) {
        console.log("true")
    }
  },

  // afterToggle called after the block is collapsed or expanded
  afterToggle: function($element, expanded) {
    if (expanded) {
        console.log("true")
    }
  }
});

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