Enhance your website's user experience with dynamic "Show More & Show Less" functionality. This feature allows you to display concise content, giving users the option to expand and view more details or collapse it back when needed. Perfect for lengthy text sections, FAQs, or product descriptions, this feature keeps your pages clean and organized while improving readability.
How to do this is nicely explained in the accompanying video
Change this class
entry-content
CSS
.entry-content {
overflow: hidden;
max-height: 4.5em;
position: relative;
}
.show-more {
cursor: pointer;
color: blue;
text-decoration: underline;
display: block;
margin-top: 10px;
}
.entry-content.expanded {
max-height: none;
}
.fade-out {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5em;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
overflow: hidden;
max-height: 4.5em;
position: relative;
}
.show-more {
cursor: pointer;
color: blue;
text-decoration: underline;
display: block;
margin-top: 10px;
}
.entry-content.expanded {
max-height: none;
}
.fade-out {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5em;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
javascript for Just show more
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('.entry-content');
const showMoreText = document.createElement('div');
showMoreText.className = 'show-more';
showMoreText.innerText = 'READ MORE';//Button text as wish
const fadeOut = document.createElement('div');
fadeOut.className = 'fade-out';
container.appendChild(fadeOut); // Initially add fade-out to the container
showMoreText.addEventListener('click', function() {
container.classList.toggle('expanded');
if (container.classList.contains('expanded')) {
fadeOut.style.display = 'none'; // Hide fade-out when expanded
showMoreText.style.display = 'none'; // Hide when clicked
} else {
fadeOut.style.display = 'block'; // Show fade-out when collapsed
}
});
container.insertAdjacentElement('afterend', showMoreText);
});
const container = document.querySelector('.entry-content');
const showMoreText = document.createElement('div');
showMoreText.className = 'show-more';
showMoreText.innerText = 'READ MORE';//Button text as wish
const fadeOut = document.createElement('div');
fadeOut.className = 'fade-out';
container.appendChild(fadeOut); // Initially add fade-out to the container
showMoreText.addEventListener('click', function() {
container.classList.toggle('expanded');
if (container.classList.contains('expanded')) {
fadeOut.style.display = 'none'; // Hide fade-out when expanded
showMoreText.style.display = 'none'; // Hide when clicked
} else {
fadeOut.style.display = 'block'; // Show fade-out when collapsed
}
});
container.insertAdjacentElement('afterend', showMoreText);
});
javascript for Just show more & show less
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.entry-content').forEach(container => {
const showMoreText = document.createElement('div');
showMoreText.className = 'show-more';
showMoreText.innerText = 'Show More'; // Button text as wish
const fadeOut = document.createElement('div');
fadeOut.className = 'fade-out';
container.appendChild(fadeOut); // Initially add fade-out to the container
showMoreText.addEventListener('click', function() {
container.classList.toggle('expanded');
if (container.classList.contains('expanded')) {
showMoreText.innerText = 'Show Less'; // Button text as wish
fadeOut.style.display = 'none'; // Hide fade-out when expanded
} else {
showMoreText.innerText = 'Show More'; // Button text as wish
fadeOut.style.display = 'block'; // Show fade-out when collapsed
}
});
container.insertAdjacentElement('afterend', showMoreText);
}); });
document.querySelectorAll('.entry-content').forEach(container => {
const showMoreText = document.createElement('div');
showMoreText.className = 'show-more';
showMoreText.innerText = 'Show More'; // Button text as wish
const fadeOut = document.createElement('div');
fadeOut.className = 'fade-out';
container.appendChild(fadeOut); // Initially add fade-out to the container
showMoreText.addEventListener('click', function() {
container.classList.toggle('expanded');
if (container.classList.contains('expanded')) {
showMoreText.innerText = 'Show Less'; // Button text as wish
fadeOut.style.display = 'none'; // Hide fade-out when expanded
} else {
showMoreText.innerText = 'Show More'; // Button text as wish
fadeOut.style.display = 'block'; // Show fade-out when collapsed
}
});
container.insertAdjacentElement('afterend', showMoreText);
}); });
