Thursday, March 28, 2024
HomejQueryToggle Lengthy Textual content Block With Easy Animations - dReadmore

Toggle Lengthy Textual content Block With Easy Animations – dReadmore


dReadmore is a small but configurable jQuery JavaScript Learn Extra/Learn Much less plugin for put up excerpts, article descriptions, lengthy textual content blocks, and so forth.

The plugin robotically hides the overflowing textual content content material and generates Extra/Much less buttons that enable the consumer to disclose the total textual content with clean, configurable sliding animations.

The best way to use it:

1. Add your lengthy textual content along with a learn extra button to the web page.

<!-- Textual content To Collapse & Develop -->
<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 Hyperlink -->
<button kind="button"
        data-drm-toggler>
        Present Extra
</button>

2. Add a line-height to the textual content block and specify the variety of strains of textual content to persist utilizing the min-height property.

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

3. Disguise the toggle hyperlink when the textual content is expanded.

.dreadmore--disabled {
  show: none;
}

4. Initialize the plugin on the textual content block and completed.

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

5. Customise the textual content for the Learn Extra & Learn Much less buttons.

<button kind="button"
  data-drm-toggler="drmKeyToggler"
  data-drm-toggler-more="Present extra customized"
  data-drm-toggler-less="Shut customized">
  Present extra customized
</button>
// OR By way of JavaScript
const dreadmore = new DReadMore({
      moreText: "Present extra",
      lessText: "Shut"
});

6. Decide whether or not to develop the textual content on web page load & window resize. Default: false.

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

7. Customise the toggle button.

<div class="dreadmore" data-drm="toggler: drmKeyToggler">
  ...
</div>
<button kind="button" data-drm-toggler="drmKeyToggler">Present extra</button>
// OR VIA JAVASCRIPT
const dreadmore = new DReadMore({
      toggler: 'drmKeyToggler'
});

8. Execute callback capabilities after earlier than/toggling.

const dreadmore = new DReadMore({

      beforeToggle: operate($ingredient, expanded) {
        console.log($ingredient, expanded)
      },

      afterToggle: operate($ingredient, expanded) {
        console.log($ingredient, expanded)
      },
      
});

9. Destroy the occasion.

dreadmore.destroy();

10. Replace the occasion.

window.addEventListener('resize', operate() {
  dreadmore.forEach(operate(merchandise) {
    merchandise.replace();
  });
});

Changelog:

v2.2.1 (2022-09-12)

  • Add: the flexibility to specify textual content in buttons by way of attributes (data-drm-toggler-more and data-drm-toggler-less).

v2.2.0 (2022-09-05)

  • Add: the flexibility to specify a toggle within the attribute (data-drm=”toggler: drmKeyToggler”), additionally, you will have to specify the attribute (data-rdm-toggler=”drmKeyToggler”) within the toggle

v2.1.6 (2022-08-23)

  • Repair: min-height just isn’t working appropriately when making use of dReadMore to a component which comprises extra then one <p> tag.

v2.1.0 (2022-01-11)

  • Eliminated jQuery dependencies.
  • Up to date strategies and parameters.

This superior jQuery plugin is developed by DSekon. For extra Superior Usages, please examine the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments