How to Create a Show/Hide Content Button with JavaScript

In this article we will see how to create a button to show and hide content with JavaScript. This is a very popular solution in blogs.

Since the content of an article is made up of a series of paragraphs, we want to display only the first ones and hide the others.

First, we need to select those elements that we are going to hide with CSS:

function hideContent(container = null, itemsCount = 5) {
        if(!container) {
            return;
        }
        const items = Array.from(container.querySelectorAll('p'));

        if(items.length === 0) {
            return;
        }

        items.slice(itemsCount - 1).forEach((item) => {
            item.classList.add('content-item', 'hidden');
        });
    }

A NodeList does not have the slice() array method, so it must first be converted into an array with the Array.from() method in order to select only a portion of it, to which we will apply the main CSS classes.

Now we can create the button to show and hide the elements:

function addReadMoreButton(container = null) {
        if(!container) {
            return;
        }
        const hiddenItems = container.querySelectorAll('.hidden');
        if(hiddenItems.length === 0) {
            return;
        }

        const target = hiddenItems[0];

        const btnContainer = document.createElement('div');
        btnContainer.className = 'read-more-wrapper';
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'read-more';
        btn.innerText = 'Read More...';
        btnContainer.appendChild(btn);
        target.insertAdjacentElement('beforebegin', btnContainer);
    }

The button is inserted at the beginning of the series of hidden elements. On click, we want it to show or hide the elements based on the presence of the hidden CSS class. We also want the button text to change according to the state of the elements.

function handleReadMoreButton() {
        const button = document.querySelector('.read-more');
        if(!button) {
            return;
        }
        const items = document.querySelectorAll('.content-item');
        if(items.length === 0) {
            return;
        }

        button.addEventListener('click', () => {
            const areHidden = Array.from(items).every(item => item.classList.contains('hidden'));
            if(areHidden) {
                for(const item of items) {
                    item.classList.remove('hidden');
                }
                button.innerText = 'Read Less...';
            } else {
                for(const item of items) {
                    item.classList.add('hidden');
                }
                button.innerText = 'Read More...';
            }
        });
    }

Here too, the every() method can be applied to the list of elements only after it has been converted into an array. It is always important to keep in mind that a NodeList is not an Array.

Demo

JavaScript Read More

Conclusion

In this article we saw how to handle a series of elements by applying array methods to them, even though they are not real arrays at the implementation level.