# "Show More" Button for Long Sections

> Shortens any block with the class "wpide-show-more" to a preview height with a fade, and adds a "Show more" button that expands it, ideal for long descriptions and terms.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: read-more, collapse, content
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-show-more-clamp/

## Code

```html
<style>
.wpide-show-more.is-clamped{max-height:var(--wpide-preview,220px);overflow:hidden;position:relative;}
.wpide-show-more.is-clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(transparent,var(--wp--preset--color--base,#fff));pointer-events:none;}
.wpide-show-more-btn{display:inline-block;margin-top:.5em;padding:.4em 0;border:0;background:none;color:inherit;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;}
</style>
<script>
document.querySelectorAll('.wpide-show-more').forEach(function (block, i) {
    var limit = parseInt(getComputedStyle(block).getPropertyValue('--wpide-preview'), 10) || 220;
    if (block.scrollHeight <= limit + 60) { return; }
    if (!block.id) { block.id = 'wpide-show-more-' + i; }
    block.classList.add('is-clamped');
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'wpide-show-more-btn';
    btn.setAttribute('aria-controls', block.id);
    btn.setAttribute('aria-expanded', 'false');
    btn.textContent = 'Show more';
    btn.addEventListener('click', function () {
        var open = block.classList.toggle('is-clamped') === false;
        btn.setAttribute('aria-expanded', open ? 'true' : 'false');
        btn.textContent = open ? 'Show less' : 'Show more';
    });
    block.insertAdjacentElement('afterend', btn);
});
</script>
```

## Notes

Change the preview height with the --wpide-preview CSS variable (default 220px). Content shorter than the preview is left alone.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find ""Show More" Button for Long Sections" 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/