The Readmore.js script supports any elements containing text that needs to be hidden, such as <div>, <p>, <section>.
Use the .readmore class or any other class specified in the initialization selector for target elements.
<div class="readmore">
<!-- Your long content here -->
</div>
Ensure that the text is long enough to exceed the collapsedHeight value you set in the options.
If you need to initialize the Readmore.js script without specifying additional parameters, it can be started with the default settings.
document.addEventListener('DOMContentLoaded', function () {
initReadMore('.readmore');
});
This method is suitable if you want the script to work on all devices without screen width limitations.
document.addEventListener('DOMContentLoaded', function () {
initReadMore('.readmore', {
collapsedHeight: 200,
speed: 200,
heightMargin: 16,
moreLink: '<a href="#">Read More</a>',
lessLink: '<a href="#">Close</a>'
});
});
The maxWidth parameter is not specified in this case. The script will be active on all devices, regardless of screen width.
This option is convenient when you want to hide part of the text on devices with a specific screen width.
By setting the maxWidth parameter (e.g., 992px), the script will activate only on screens up to 992px, while on larger screens, the text will display in full without the "Read more" button.
document.addEventListener('DOMContentLoaded', function () {
initReadMore('.readmore', {
collapsedHeight: 200,
speed: 200,
heightMargin: 16,
moreLink: '<a href="#">Read More</a>',
lessLink: '<a href="#">Close</a>'
});
}, 992);