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

Add the following CSS to your sites global CSS or on the Loop Grid Widgets Advanced page if you prefer.

/* 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.

<script>
    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';
                }
            });
        });
    });
</script>

If you’ve added a read more button like this to Elementor, or something similar, I’d love to hear how it went. Let me know!

(Test Post 3:50pm 24 June 2024)