"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.
Opens WPIDE on
Code
<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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.