Mostrare e nascondere i contenuti con JavaScript

In questo articolo vedremo come creare un pulsante per mostrare e nascondere i contenuti con JavaScript. Si tratta di una soluzione molto popolare nei blog.

Essendo il contenuto di un articolo composto da una serie di paragrafi, vogliamo mostrare solo i primi e nascondere gli altri.

Come prima cosa dobbiamo selezionare quegli elementi che andremo a nascondere con i 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');
        });
    }

Una NodeList non possiede il metodo degli array slice(), quindi deve essere prima convertita in un array con il metodo Array.from() per poterne selezionare solo una porzione a cui andremo ad applicare le classi CSS principali.

Ora possiamo creare il pulsante per mostrare e nascondere gli elementi:

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);
    }

Il pulsante viene inserito all'inizio della serie di elementi nascosti. Al clic, vogliamo che mostri o nasconda gli elementi in base alla presenza della classe CSS hidden. Inoltre vogliamo che il testo del pulsante cambi in base allo stato degli elementi.

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

Anche qui il metodo every() può essere applicato alla lista degli elementi solo dopo che quest'ultima è stata convertita in un array. Bisogna sempre tener presente che una NodeList non è di tipo Array.

Demo

JavaScript Read More

Conclusione

In questo articolo abbiamo visto come gestire una serie di elementi applicando loro i metodi degli array anche se a livello implementativo non sono array veri e propri.

Torna su