'Load More' List Template

Improve performance and user experience by incrementally loading items into a long list.

This template uses JavaScript to initially hide most list items, showing more each time the user clicks the "Load More" button.

A list of items with a 'Load More' button at the bottom.

Get Source Code Preview

About this Template

This component provides a client-side solution for progressive list loading. It assumes the full list of items is present in the HTML but uses JavaScript to hide most of them initially. Each click on the "Load More" button reveals a new batch of items. When all items are visible, the button automatically hides itself. This is an excellent technique for improving perceived performance on pages with many list items.

Features

Improved Perceived Performance: By showing only a few items at first, the page feels faster and less cluttered.
Client-Side Logic: This template's logic is all client-side, making it easy to implement. It can be adapted to fetch new items from a server with more advanced JavaScript.
Pure JavaScript: The functionality is lightweight and has no external dependencies.
Automatic Button Hiding: The "Load More" button disappears when all items have been displayed.
Self-Contained: The component is fully self-contained and ready to be used in any project.

Code Breakdown

The structure consists of a standard unordered list (ul) and a button. The JavaScript handles all the logic.

On page load, the script first hides all list items beyond a predefined initial amount (e.g., the first three). It then attaches a click event listener to the "Load More" button. When the button is clicked, the script finds the next hidden list items and reveals them. This is managed by keeping track of how many items are currently visible. After revealing a new batch, the script checks if there are any remaining hidden items. If not, it hides the "Load More" button.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>"Load More" List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f1f5f9;
            color: #334155;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           "Load More" List Component Styles - Copy from here
           ========================================================================== */
        .load-more-template {
            --load-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --load-primary-text-color: #1e293b;
            --load-secondary-text-color: #64748b;
            --load-accent-color: #0ea5e9;
            --load-bg-color: #ffffff;
            --load-border-color: #e2e8f0;

font-family: var(--load-font-family);
            color: var(--load-primary-text-color);
            width: 100%;
            max-width: 700px;
            background-color: var(--load-bg-color);
            border: 1px solid var(--load-border-color);
            border-radius: .5rem;
            padding: 2rem;
        }

.load-more-template *,
        .load-more-template *::before,
        .load-more-template *::after {
            box-sizing: border-box;
        }
        
        .load-more-template .list-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .load-more-template .list-header h2 {
            font-size: 1.75rem;
            margin: 0;
        }

.item-list {
            list-style: none;
            padding: 0;
            margin: 0 0 2rem 0;
        }
        
        .item-list li {
            padding: 1rem 0;
            border-bottom: 1px solid var(--load-border-color);
            line-height: 1.6;
        }

.item-list li:first-child {
             border-top: 1px solid var(--load-border-color);
        }

.load-more-controls {
            text-align: center;
        }

.load-more-btn {
            background-color: var(--load-accent-color);
            color: white;
            padding: .75rem 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            border-radius: .5rem;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        
        .load-more-btn:hover {
            background-color: #0284c7;
        }
    </style>
</head>
<body>

<div class="load-more-template">
    <header class="list-header">
        <h2>Field Report: Anomaly Log</h2>
    </header>

<ul class="item-list">
        <li>Encountered a flock of garden gnomes performing synchronized swimming in a puddle.</li>
        <li>Vending machine dispensed a single, sentient cheeto that offered cryptic advice.</li>
        <li>Discovered a local library where all the books are slightly damp for no discernible reason.</li>
        <li>A park bench was observed to be sighing heavily every Tuesday at 3:15 PM.</li>
        <li>Streetlight flickers in morse code, appears to be complaining about the weather.</li>
        <li>Received an invoice from a goose for "emotional damages".</li>
        <li>Filing cabinet in abandoned office spontaneously generates lukewarm tapioca pudding.</li>
        <li>Found a squirrel trading acorns for what appeared to be insider stock tips.</li>
        <li>Crossed a bridge that was definitely not there yesterday.</li>
        <li>The office plant has started offering unsolicited but surprisingly good relationship advice.</li>
    </ul>
    
    <div class="load-more-controls">
        <button type="button" class="load-more-btn">Load More</button>
    </div>

// Initially hide all items beyond the initial amount
            listItems.forEach((item, index) => {
                if (index >= initialShow) {
                    item.hidden = true;
                }
            });
            
            // If there are no more items to show initially, hide the button
            if (listItems.length <= initialShow) {
                loadMoreBtn.hidden = true;
            }

loadMoreBtn.addEventListener('click', () => {
                let itemsShown = 0;
                
                // Show the next batch of hidden items
                for (let i = 0; i < listItems.length; i++) {
                    if (listItems[i].hidden && itemsShown < loadMoreAmount) {
                        listItems[i].hidden = false;
                        itemsShown++;
                    }
                }
                
                // Check if there are any hidden items left
                const hiddenItems = listContainer.querySelectorAll('.item-list li[hidden]');
                if (hiddenItems.length === 0) {
                    loadMoreBtn.hidden = true;
                }
            });
        });
    </script>
</div>

</body>
</html>

View Output