Get started with Readmore.js CDN

MIT licensed

Readmore.js is a lightweight library that hide and reveal long content on web pages with a Read more link.

Tags:
  • css
  • jquery
  • readmore
  • expand
  • collapse

Stable version

Copied!

How to start using Readmore.js CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with Readmore.js CDN - cdnhub.io</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.cdnhub.io/Readmore.js/2.2.1/readmore.min.js"></script>
</head>
<body>
    <div id="content">
        <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc quis bibendum rhoncus, elit quam bibendum odio, ut commodo nibh nisi eu nibh. Aliquam erat volutpat. Nam rhoncus augue quis urna. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices.</p>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const readmore = new Readmore({
                target: '#content p',
                moreSelector: '.readmore-toggle',
                lessSelector: '.readmore-hide',
                maxHeight: 100,
                collapsed: false
            });
        });
    </script>
    <style>
        .truncate {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .readmore-toggle {
            cursor: pointer;
        }
    </style>
</body>
</html>
Copied!
Copied!

All versions