Read More button to Expand Post in Archives.
Add the following CSS to your sites global CSS or on the Loop Grid Widgets Advanced page if you prefer.
I’ve had a couple of questions recently about ‘read more’ buttons. Usually a Read More button in the WordPress archive takes you to the relevant post page, but what if it just revealed the full content on the archive page instead?
WordPress by default has two kinds of content that can appear in the Archives, or Post List. The Page Content, or an Extract. WordPress can also automatically create an extract from your content, but often the automatic extract will have no formatting, making the extract preview hard to read.
A solution I’ve occasionally used, is an Archives page using Elementor Loop Grid, set to display the whole post content. A ‘read more’ button is added, where clicking the button expands to display the full post. The post can be contracted to a preview.
To do this you will need to use CSS for the box, and some Javascript to control the box size and change the ‘read more’ button to a ‘read less’ button.
Start by creating your Elementor Loop Grid. This will display your post name, featured image, post meta, and use Post Content rather than extract. Add a button with ‘Read More’ text below the Post Content Widget (or text widget populated by dynamic content).
The Read More button and the Post Content Container, will need a custom class, which you can add on the ‘advanced’ tab of each widgets settings.
I have given the Read More button a custom class of .read-more-btn and the Post Content container is .readmorecontainer
/* Container for the post content */
.readmorecontainer {
overflow: hidden;
max-height: 24em;
transition: max-height 1s ease-in-out;
}
/* Expanded state of the post content */
.readmorecontainer.expanded {
max-height: none;
}
.read-more-btn {
cursor: pointer;
display: block;
margin-top: 2%;
}
Now add the following Javascript to Elementor’s custom code section.
document.addEventListener('DOMContentLoaded', function() {
const readMoreButtons = document.querySelectorAll('.read-more-btn');
readMoreButtons.forEach(button => {
const postContent = button.previousElementSibling;
if (postContent.scrollHeight <= postContent.clientHeight) {
button.style.display = 'none';
}
button.addEventListener('click', function(event) {
event.preventDefault();
if (postContent.classList.contains('expanded')) {
postContent.style.maxHeight = postContent.scrollHeight + 'px';
postContent.offsetHeight;
postContent.style.maxHeight = '24em';
postContent.classList.remove('expanded');
this.textContent = 'Read More';
postContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
} else {
postContent.style.maxHeight = postContent.scrollHeight + 'px';
postContent.addEventListener('transitionend', function handler() {
postContent.style.maxHeight = 'none';
postContent.removeEventListener('transitionend', handler);
});
postContent.classList.add('expanded');
this.textContent = 'Read Less';
}
});
});
});
To see a preview of how the code below works, visit my news pages where it is currently in use. https://easywebthings.co.nz/category/faq/
Want me to implement this or something similar on your site? Contact Easy Web Things
If you’ve added a read more button like this to Elementor, or something similar, I’d love to hear how it went.
(Post 3:50pm 24 June 2024)
Update: Elementor Read More Widget
Elementor has now released a widget called the ‘Read More Widget’ that does a similar thing to the code I’ve mentioned. However, it’s implementation is a little different, and it appears it needs to be added to each post, and from what I’ve seen it doesn’t have an expansion effect to view the full post within the archives window.
If you want to use the Elementor Read More widget, add it partway down a post. Then, when the post appears on an archive page, the Read More button should also appear. When I tested this, the read more button took me through to a post page rather than expanding the post within the archives page.
At the time of writing this update, I am still using the code from my original post to implement ‘read more’ in a loop grid, as this enables me to apply it to all posts, rather than adding it manually to each, and I like the post expanding within the archive page.
You can read more about the Elementor ‘Read More’ widget here: https://elementor.com/help/read-more-widget/
