Readmore

Please follow this instructions to implement a dynamic read more link

Add the following code to bottom.html page. Those template will be fetch in js script to display Read More & Read Less link with wanted classes ans locales.

<script type="text/template" id="templateReadMore">
    <button class="link-expand link-read-more">
        <span>__@@Read more@@__</span>
    </button>
</script>

<script type="text/template" id="templateReadLess">
    <button class="link-expand link-read-less">
        <span>__@@Read less@@__</span>
    </button>
</script>

Then we'll used a npm package to manage readmore implementation. Let see https://www.npmjs.com/package/readmore-js to install package.

Sometimes client want to activate the read more depending on device. So, first, we'll need to setup an helper function to define current device in a js file.

export function getCurrentDevice(){
    let currentDevice = 'desktop';

    if ($win.width() <= 767) {
        currentDevice = 'mobile'
    } else if ($win.width() < 1200) {
        currentDevice = 'tablet'
    } else {
        currentDevice = 'desktop'
    }

    return currentDevice;
}

Then add the following code in a js file. Don't forget to import readmore-js plugin and getCurrentDevice helper

It's preferable to call this code on load and on resize

require('readmore-js');

import { getCurrentDevice } from './helpers.js';

const showOnDevice = ($el) => {
    const dataValue = $el.data('read-more-device');
    let shouldShow = true;

    if (dataValue) {
        let devicesList = dataValue.split(',');

        if (devicesList.indexOf(getCurrentDevice()) < 0) shouldShow = false;
    }

    return shouldShow;
}

const Readmore = () => {
    const $readMore = $('#templateReadMore').html(),
          $readLess = $('#templateReadLess').html();

    $('[data-read-more]').each(function(){
        let $el = $(this);

        if (showOnDevice($el)) {
            let maxHeight = getMaxHeight($el);

            $el.readmore({
                collapsedHeight: maxHeight,
                lessLink: $readLess,
                moreLink: $readMore,
            });
        } else {
            $el.readmore('destroy');
        }
    })
}

function getMaxHeight($el, lines = 5) {
    let tempoLines = parseInt($el.data('readMore'),10);
    return ((tempoLines > 0) ? tempoLines : lines) * parseInt($el.css('line-height'),10) || 115
}

export default function expandableUI() {
    Readmore();
}

How to use :

Default version: <div data-read-more> Lorem ipsum </div>

Number of line: <div data-read-more="6"> Lorem ipsum </div>

Specify devices: <div data-read-more data-read-more-device="tablet,desktop">Lorem ipsum</div>

Add the following code too to setup basic style for read more buttons

[data-read-more] {
    overflow: hidden;
}

.link-expand {
    background: transparent;
    border: 0 solid transparent;
    margin-top: 30px;

    &.link-read-more {
        position: relative;
        /* Shadow effect on the readmore */
        &:before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 0;
            height: 50px;
            width: 100%;
            background: linear-gradient(to top, #fff, rgba(#fff, 0));
        }
    }

    &:focus {
        outline: none;
    }
}

Also you can add smoother appearance with css styling. Just add transition to your data-read-more styling.

[data-read-more] {
    overflow: hidden;
    transition: height 0.5s ease-in-out.
}