【JavaScript】要素が一定数以上ある場合に省略表示する方法

JavaScriptを使って、要素が一定数以上ある場合に省略表示する方法を紹介します。この方法では、指定した数以上の要素を隠し、最後に「さらに表示…」というリンクを表示します。

HTMLとCSS
JavaScriptで要素を制御する
コードの解説
まとめ

HTMLとCSS

まず、HTMLとCSSを準備します。ここでは、要素を表示するコンテナを設定し、CSSで省略表示のスタイルを定義します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Truncation</title>
    <style>
        .container {
            max-height: 100px; /* 固定の高さ */
            overflow: hidden; /* 溢れる部分を隠す */
            position: relative;
        }
        .more {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            background: rgba(255, 255, 255, 0.8); /* 背景を半透明に */
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        <div>アイテム1</div>
        <div>アイテム2</div>
        <div>アイテム3</div>
        <div>アイテム4</div>
        <div>アイテム5</div>
        <div>アイテム6</div>
        <div>アイテム7</div>
        <div>アイテム8</div>
    </div>
</body>
</html>

JavaScriptで要素を制御する

次に、JavaScriptを使って要素を制御します。ここでは、表示する最大アイテム数を5つに設定し、それ以上の要素を非表示にします。また、「さらに表示…」のリンクを追加します。

<script>
    const container = document.getElementById('container');
    const items = container.children;

    if (items.length > 5) { // 表示する最大アイテム数
        for (let i = 5; i < items.length; i++) {
            items[i].style.display = 'none';
        }

        const more = document.createElement('div');
        more.classList.add('more');
        more.textContent = 'さらに表示...';
        container.appendChild(more);
    }
</script>

コードの解説

コンテナの取得: document.getElementById(‘container’)を使って、要素が含まれているコンテナを取得します。
アイテムの取得: container.childrenでコンテナ内の全ての子要素を取得します。
要素の非表示: if (items.length > 5)でアイテム数を確認し、5つを超える場合は6番目以降の要素を非表示にします。
リンクの追加: document.createElement(‘div’)を使って「さらに表示…」のリンクを作成し、コンテナに追加します。

まとめ

この方法を使うことで、Webページのデザインを損なうことなく、多くの要素を省略表示することができます。ぜひ試してみてください。