README

Forked from https://github.com/DSekon/DReadMore for using as drupal-library.

The plugin for collapsing and expanding long blocks of text. You can DISABLE it using CSS!

Demo

Getting Started With DReadMore

Include Files To Website

After that we need to include DReadMore JS file to our website. In your html file:

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    ...
    <script src="https://unpkg.com/dreadmore@2/dist/dreadmore.min.js"></script>
</body>
</html>

Add HTML Layout

Now, we need to add basic DReadMore layout:

<div class="dreadmore">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit recusandae quas eaque
    laudantiumquo, 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>
<button type="button"
        data-drm-toggler>Show more</button>

Add CSS Styles

After that, we may need to set DReadMore min-height and overflow in your CSS file:

.dreadmore {
    min-height: 2px;
    overflow: hidden;
}

/* for a disabled toggler */
.dreadmore--disabled {
    display: none;
}

Set a min-height based on lines, you could do so in CSS: 1px - 1 line

Documentation

Options

Let's look on list of all available parameters:

Parameter	Type	Default	Description
initialExpand	boolean	false	Set to true and the text will be expanded at the start
isInitialExpandWhenUpdate	boolean	false	Returns in the original state specified in startOpen when the screen is resized
moreText	string	'Show more'	The text of the button when the collapsed text
lessText	string	'Close'	The text of the button when the expanded text

Example:

const dreadmore = new DReadMore({
    initialExpand: true,
    isInitialExpandWhenUpdate: true,
    moreText: 'Show more',
    lessText: 'Up'
});

Callbacks

After that we need to include DReadMore JS file to our website. In your html file:

const dreadmore = new DReadMore({
    // beforeToggle called after a more or less link is clicked, 
    // but before the block is collapsed or expanded
    beforeToggle: function($element, expanded) {
        console.log($element, expanded)
    },

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

Update

dreadmore.update();

Destroy

If you really want to be that guy...

dreadmore.destroy();

Disable

Aaaaaand you can disable in CSS :D

.dreadmore {
    min-height: 0px;
}

levmyshkin / dreadmore

Maintainers

Details