【JavaScript】指定した要素が一定数以上ある場合にアコーディオンを実装する方法

ウェブページ上で、アイテムが多すぎて全てを一度に表示するのが難しい場合があります。そんな時、アコーディオン（折りたたみ機能）を使用すると便利です。この記事では、JavaScriptを使って、指定した要素が一定数以上ある場合に残りの要素をアコーディオンで表示する方法を紹介します。

対象の要素を取得する
表示する最大数を設定し、要素の数を確認する
超過した要素を隠す
「もっと見る」ボタンを作成する
ボタンにクリックイベントを追加する
スタイルの調整（任意）
サンプルコード
まとめ

対象の要素を取得する

まず、アコーディオン機能を適用したい要素を取得する必要があります。今回は、クラス名が item である要素を取得します。

const items = document.querySelectorAll('.item');

このコードは、item クラスを持つすべての要素を選択します。querySelectorAll メソッドを使用しているため、配列のような形式で要素を取得します。

表示する最大数を設定し、要素の数を確認する

次に、表示する要素の最大数を設定し、その数を超えるかどうかをチェックします。

const maxVisibleItems = 5; // 表示する最大の要素数
if (items.length > maxVisibleItems) {
    // アコーディオンを適用する処理を実行
}

これにより、要素の数が maxVisibleItems より多い場合のみアコーディオンが適用されます。

超過した要素を隠す

表示する最大数を超えた要素は、最初に非表示にしておきます。

items.forEach((item, index) => {
    if (index >= maxVisibleItems) {
        item.style.display = 'none';
    }
});

このコードでは、5番目の要素以降が隠れるようにしています。forEach ループを使って、条件に合う要素だけを非表示にします。

「もっと見る」ボタンを作成する

次に、アコーディオンを展開するための「もっと見る」ボタンを作成します。ボタンをクリックすると隠れている要素が表示される仕組みです。

const showMoreButton = document.createElement('button');
showMoreButton.textContent = 'もっと見る';
showMoreButton.classList.add('show-more-button');
items[items.length - 1].after(showMoreButton);

これにより、「もっと見る」ボタンがアイテムリストの最後に追加されます。

ボタンにクリックイベントを追加する

次に、ボタンにクリックイベントを設定し、ボタンがクリックされた時に隠れている要素を表示できるようにします。

let isExpanded = false;
showMoreButton.addEventListener('click', () => {
    isExpanded = !isExpanded;
    items.forEach((item, index) => {
        if (index >= maxVisibleItems) {
            item.style.display = isExpanded ? '' : 'none';
        }
    });
    showMoreButton.textContent = isExpanded ? '閉じる' : 'もっと見る';
});

この部分では、クリック時に隠れていた要素を表示し、ボタンのテキストを「閉じる」と「もっと見る」で切り替える処理を実装しています。

スタイルの調整（任意）

最後に、もっと見るボタンのスタイルを調整して、ページ全体のデザインに統一感を持たせます。

.show-more-button {
    display: block;
    margin: 10px auto;
    padding: 8px 16px;
}

このようにスタイルを調整することで、ボタンが目立つようになり、ユーザーが操作しやすくなります。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>アコーディオン機能の例</title>
    <style>
        .show-more-button {
            display: block;
            margin: 10px auto;
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul id="item-list">
        <li class="item">アイテム1</li>
        <li class="item">アイテム2</li>
        <li class="item">アイテム3</li>
        <li class="item">アイテム4</li>
        <li class="item">アイテム5</li>
        <li class="item">アイテム6</li>
        <li class="item">アイテム7</li>
    </ul>

    <script>
        const items = document.querySelectorAll('.item');
        const maxVisibleItems = 5;

        if (items.length > maxVisibleItems) {
            items.forEach((item, index) => {
                if (index >= maxVisibleItems) {
                    item.style.display = 'none';
                }
            });

            const showMoreButton = document.createElement('button');
            showMoreButton.textContent = 'もっと見る';
            showMoreButton.classList.add('show-more-button');
            items[maxVisibleItems - 1].after(showMoreButton);

            let isExpanded = false;
            showMoreButton.addEventListener('click', () => {
                isExpanded = !isExpanded;
                items.forEach((item, index) => {
                    if (index >= maxVisibleItems) {
                        item.style.display = isExpanded ? '' : 'none';
                    }
                });
                showMoreButton.textContent = isExpanded ? '閉じる' : 'もっと見る';
            });
        }
    </script>
</body>
</html>

まとめ

この記事では、JavaScriptを使って指定した要素が一定数を超えた場合にアコーディオン形式で表示する方法を紹介しました。このテクニックを使えば、ページ上の大量のコンテンツをすっきりと管理し、ユーザーにとって使いやすいインターフェースを提供することができます。