Live Preview

This is a safe and stable "Read More" widget. It is fully self-contained and designed for easy integration into any webpage. This version avoids common performance pitfalls, ensuring it will not slow down or crash your site. The widget automatically calculates the height of the specified number of lines and hides everything below it. When "Show more" is clicked, the container smoothly expands to reveal the rest of the content. This behavior is fully responsive. If the content is short, the "Show more" button will cleverly hide itself. This additional text makes the default paragraph longer, providing a more realistic example for testing the "Read More" functionality across different screen sizes and line-count settings. You can see how the fade-out effect applies and how the content expands smoothly upon clicking the button. This ensures that you can properly evaluate the visual appearance and user experience before generating the final code for your website. Feel free to replace this text with your own content to see how it looks.

Generated Code

<!-- Read More Widget - Start -->
<div class="rm-widget-widget-ja2zr8cpc-container">
    <div class="rm-widget-widget-ja2zr8cpc-panel"><p>This is a safe and stable "Read More" widget. It is fully self-contained and designed for easy integration into any webpage. This version avoids common performance pitfalls, ensuring it will not slow down or crash your site. The widget automatically calculates the height of the specified number of lines and hides everything below it. When "Show more" is clicked, the container smoothly expands to reveal the rest of the content. This behavior is fully responsive. If the content is short, the "Show more" button will cleverly hide itself. This additional text makes the default paragraph longer, providing a more realistic example for testing the "Read More" functionality across different screen sizes and line-count settings. You can see how the fade-out effect applies and how the content expands smoothly upon clicking the button. This ensures that you can properly evaluate the visual appearance and user experience before generating the final code for your website. Feel free to replace this text with your own content to see how it looks.</p></div>
    <button class="rm-widget-widget-ja2zr8cpc-toggle-button rm-widget-widget-ja2zr8cpc-show-more">Show more</button>
    <button class="rm-widget-widget-ja2zr8cpc-toggle-button rm-widget-widget-ja2zr8cpc-show-less">Show less</button>
</div>
<style>
    .rm-widget-widget-ja2zr8cpc-container { width: 100% !important; position: relative !important;  }
    .rm-widget-widget-ja2zr8cpc-panel { transition: max-height 0.5s ease-in-out !important; overflow: hidden !important; -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%) !important; mask-image: linear-gradient(to bottom, black 60%, transparent 100%) !important; cursor: pointer; }
    .rm-widget-widget-ja2zr8cpc-panel p { font-family: 'Inter', sans-serif !important; color: #000000 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; margin: 0 0 0em 0 !important; }
    .rm-widget-widget-ja2zr8cpc-toggle-button { display: none !important; padding: 0 !important; margin: 10px 0 0 0 !important; border: none !important; background-color: transparent !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; text-align: left !important; cursor: pointer !important; width: 100%; }
    .rm-widget-widget-ja2zr8cpc-toggle-button.rm-widget-widget-ja2zr8cpc-show-more { color: #000000 !important; }
    .rm-widget-widget-ja2zr8cpc-toggle-button.rm-widget-widget-ja2zr8cpc-show-less { color: #6b7280 !important; }
    .rm-widget-widget-ja2zr8cpc-show-more { display: block !important; }
    .rm-widget-widget-ja2zr8cpc-container.is-expanded .rm-widget-widget-ja2zr8cpc-panel { -webkit-mask-image: none !important; mask-image: none !important; cursor: default; }
    .rm-widget-widget-ja2zr8cpc-container.is-expanded .rm-widget-widget-ja2zr8cpc-show-more { display: none !important; }
    .rm-widget-widget-ja2zr8cpc-container.is-expanded .rm-widget-widget-ja2zr8cpc-show-less { display: block !important; }
    .rm-widget-widget-ja2zr8cpc-container.is-fully-visible .rm-widget-widget-ja2zr8cpc-panel { max-height: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
    .rm-widget-widget-ja2zr8cpc-container.is-fully-visible .rm-widget-widget-ja2zr8cpc-toggle-button { display: none !important; }
    @media (max-width: 768px) {
        .rm-widget-widget-ja2zr8cpc-panel p, .rm-widget-widget-ja2zr8cpc-toggle-button { font-size: 14px !important; }
    }
</style>
<script>
(function() {
    'use strict';
    function setupWidget(widget) {
        if (widget.getAttribute('data-rm-widget-initialized') === 'true') return;
        const panel = widget.querySelector('.rm-widget-widget-ja2zr8cpc-panel');
        if (!panel) return;
        const style = window.getComputedStyle(panel);
        const lineHeight = parseFloat(style.lineHeight) || (parseFloat(style.fontSize) * 1.6);
        const peekHeight = lineHeight * 5;
        const fullHeight = panel.scrollHeight;
        if (fullHeight - peekHeight < lineHeight) {
            widget.classList.add('is-fully-visible');
            return;
        }
        panel.style.maxHeight = peekHeight + 'px';
        widget.setAttribute('data-rm-widget-initialized', 'true');
        const showMoreButton = widget.querySelector('.rm-widget-widget-ja2zr8cpc-show-more');
        const showLessButton = widget.querySelector('.rm-widget-widget-ja2zr8cpc-show-less');
        if (!showMoreButton || !showLessButton) return;
        function expand() {
            if (!widget.classList.contains('is-expanded')) {
                widget.classList.add('is-expanded');
                panel.style.maxHeight = fullHeight + 'px';
            }
        }
        showMoreButton.addEventListener('click', expand);
        panel.addEventListener('click', expand);
        showLessButton.addEventListener('click', () => {
            widget.classList.remove('is-expanded');
            panel.style.maxHeight = peekHeight + 'px';
        });
    }
    function initAllWidgets() {
        document.querySelectorAll('.rm-widget-widget-ja2zr8cpc-container').forEach(setupWidget);
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initAllWidgets);
    else initAllWidgets();
    window.init_rm_widget_widget_ja2zr8cpc = initAllWidgets;
})();
</script>
<!-- Read More Widget - End -->