SynReadMoreJs

Provides this JavaScript plugin offers a way to shorten long texts or content to a desired length and toggle them on or off as needed with a button.

Usage

In order for the plugin to work, it must be surrounded by an element with the data-syn-read-more attribute and the syn-rm--container class must be added to the surrounded element.

Available attributes

| Attributes | description | Default | |-----------------------------|------------------------------------------------------------|-----------------| | data-syn-rm--initial-height | It becomes smaller as the defined pixel. | 300 | | data-syn-rm--expand-text | The text used to expand is used to change it optionally. | Mehr lesen | | data-syn-rm--collapse-text | The text used to collapse is used to change it optionally. | Weniger anzeige |

Example

<div class="syn-read-more--content"
     data-syn-rm--initial-height="250"
     data-syn-rm--expand-text="{{ 'syn.read-more.expand-text'|trans }}"
     data-syn-rm--collapse-text="{{ 'syn.read-more.collapse-text'|trans }}"
     data-syn-read-more>
    <div class="product-detail-description-text syn-rm--container"
         itemprop="description" data-syn-rm--anchor="#description">
        {{ product.translated.description|raw }}
    </div>
</div>

Import

import SynReadMorePlugin from '@synergynetworks/read-more';

const PluginManager = window.PluginManager;
PluginManager.register('SynReadMorePlugin', SynReadMorePlugin, '[data-syn-read-more]');

Import SCSS

@import '../../node_modules/@synergynetworks/read-more/scss/syn-read-more';