# Collapse Long Comments With a Read More Button

> Shortens very long comments to a few lines with a soft fade and a Read more / Show less button. Works with classic themes and the Comments block, and leaves comments whole when JavaScript is off.

- Type: HTML
- Runs: Site-wide footer
- Category: [Comments](https://wpide.com/library/category/comments/)
- Tags: comments, javascript, ux, accessibility
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/collapse-long-comments/

## Code

```html
<style>
.wpide-comment-collapsed {
    max-height: var(--wpide-comment-height, 200px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
    mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.wpide-comment-toggle {
    margin: .5em 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.wpide-comment-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
@media print {
    .wpide-comment-collapsed { max-height: none; -webkit-mask-image: none; mask-image: none; }
    .wpide-comment-toggle { display: none; }
}
</style>
<script>
(function () {
    var COLLAPSED_HEIGHT = 200; // Visible height of a collapsed comment, in pixels.
    var MIN_HIDDEN = 120;       // Only collapse when at least this much would be hidden.
    var MORE_TEXT = 'Read more';
    var LESS_TEXT = 'Show less';

    var bodies = document.querySelectorAll('.comment-content, .wp-block-comment-content');

    Array.prototype.forEach.call(bodies, function (body, index) {
        if (body.scrollHeight < COLLAPSED_HEIGHT + MIN_HIDDEN) {
            return;
        }

        if (!body.id) {
            body.id = 'wpide-comment-body-' + (index + 1);
        }

        body.style.setProperty('--wpide-comment-height', COLLAPSED_HEIGHT + 'px');

        var button = document.createElement('button');
        button.type = 'button';
        button.className = 'wpide-comment-toggle';
        button.setAttribute('aria-controls', body.id);

        var setOpen = function (open) {
            body.classList.toggle('wpide-comment-collapsed', !open);
            button.setAttribute('aria-expanded', open ? 'true' : 'false');
            button.textContent = open ? LESS_TEXT : MORE_TEXT;
        };

        button.addEventListener('click', function () {
            var open = body.classList.contains('wpide-comment-collapsed');
            setOpen(open);
            if (!open && body.getBoundingClientRect().top < 0) {
                body.scrollIntoView({ block: 'start' });
            }
        });

        // Keyboard users who tab into a link in the hidden part get the whole comment.
        body.addEventListener('focusin', function () {
            if (body.classList.contains('wpide-comment-collapsed')) {
                setOpen(true);
            }
        });

        body.parentNode.insertBefore(button, body.nextSibling);
        setOpen(false);
    });
})();
</script>
```

## Notes

Change the heights and button texts at the top of the script. Screen readers still read the whole comment, the button reports whether it is expanded, and tabbing into a link in the hidden part opens the comment.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Collapse Long Comments With a Read More Button" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/