Easy Web Things

June 24, 2024


This post is a test post.

Testing ActivityPub. Does editing here change the post when viewed elsewhere?

Yes it does, the answer is yes when the post is on this server, but it seems other servers may show an older copy of this post.

Well, this seems to be working. Good.

If you’re wondering what on earth I’m on about, I’m setting up this blog with Activity Pub, so it can be followed within the Fediverse.

If you have heard of the Fediverse, and are reading this blog on something like the Mastodon social media… Yay! You can see it! That’s great, it works! And also I’m really excited that replies via other clients seem to show up as comments on this blog.

If you have never heard of the Fediverse, well that’s ok. Please read this article that Douglas Adams wrote about the internet in 1999, to emotionally prepare you for new things. https://douglasadams.com/dna/19990901-00-a.html Then, read about what the Fediverse is on Wikipedia here: https://en.wikipedia.org/wiki/Fediverse

Read More

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.

    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) {

                if (postContent.classList.contains('expanded')) {
                    postContent.style.maxHeight = postContent.scrollHeight + 'px';
                    postContent.style.maxHeight = '24em';
                    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);
                    this.textContent = 'Read Less';

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)

Read More