dtcmedia-summarize v1.1.17

Summarize

Summarize content with the ability to toggle visibility, the vanilla way.

Install

Install with Yarn:

$ yarn add dtcmedia-summarize

Import module:

import summarize from 'dtcmedia-summarize';

Summarize with defaults:

summarize();

Settings

Summarize with settings:

summarize({
    debug: false,
    defaultStyles: true,
    parentSelector: '.js-summarize',
    contentSelector: 'div',
    toggleSelector: 'button',
    toggleTextSelector: 'button span'
});

Usage

Setup the correct markup with data attributes:

Use the following code example to get you started:

<article class="js-summarize">
    <div data-summarize-height="200" data-summarize-overlap="80">
         <p>Lorem ipsum...</p>
    </div>
    <button data-summarize-more="Show more" data-summarize-less="Show less">
         <span>Show more</span>
         <i class="fa fa-angle-down"></i>
    </button>
</article>