【jQuery】もっと見るボタンでn件ずつ表示

サイト制作を行っていると、「ボタンクリックでリストを3件ずつ表示してほしい」という依頼はちょくちょくあるかと存じます。

当記事ではもっと見るボタンでn件ずつ表示するリストをjQueryで実現する方法について記します。

Contents

実装イメージ
HTML
CSS
jQuery
デモ
解説
ソースコード全文

実装イメージ

今回実現したいものは、下記のようにボタンクリックでn件ずつ表示するリストになります。

満たしたい要件としては、下記とします。

・Moreボタンクリックでn件ずつ表示
・表示するコンテンツがなくなったらMoreボタンを消す
・リストが初期表示数以下であればMoreボタンを表示しない
・リストが複数あってもお互い干渉しない

HTML

なんの変哲もないリストです。重要なポイントとしては、.more-list の中に .more-btn を入れておくことぐらいです。
※これはリストとボタンを1セットにするためで、リストを複数持つ場合に効いてきます。

jQueryもCDNで読み込んで使えるようにしておきましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="more-list">
    <ul>
        <li>1</li> <li>2</li> <li>3</li>
        <li>4</li> <li>5</li> <li>6</li>
        <li>7</li> <li>8</li> <li>9</li>
        <li>10</li> <li>11</li> <li>12</li>
    </ul>
    <p class="more-btn">More</p>
</div>

CSS

一応サンプルのCSSも載せておきます。ここではリストが3列になるようにしてわかりやすいように背景色をつけています。

.more-list{
    margin: 0 0 30px;
    max-width: 500px;
}
.more-list ul{
    display: flex;
    flex-wrap: wrap;
    padding-inline-start: 0;
}
.more-list li{
    width: 32%;
    height: 60px;
    background-color: #BDBDBD;
    list-style: none;
    margin: 0 0 10px;
}
.more-list li:nth-child(3n-1){
    margin: 0 1%;
}
.more-btn{
    background-color:black;
    color: #fff;
    padding: 10px;
    margin: 0 auto;
    width: 200px;
    text-align:center;
}
.more-btn:hover{
    cursor: pointer;
}

jQuery

解説は後でするとして、まずは下記デモで動きを確認してみましょう。

const init = 6  //初期表示数
const more = 3  //追加表示数

// 初期表示数以降のリスト内容を非表示に
$(".more-list li:nth-child(n+" + (init+1) + ")").hide()

//初期表示数以下であればMoreボタンを非表示
$(".more-list").filter(function(){
    return $(this).find("li").length <= init
}).find(".more-btn").hide()    

// Moreボタンクリックで指定数表示
$(".more-btn").on("click",function(){
    let this_list = $(this).closest(".more-list")
    this_list.find("li:hidden").slice(0,more).slideToggle()

    if(this_list.find("li:hidden").length == 0){
        $(this).fadeOut()
    }
})

デモ

下記にリストを3つ用意しました。
お互いのリストが干渉せず、指定数（ここでは6件）以下の時はボタンが隠れていて、リストが全部表示されたときもボタンが消えるようになっていると思います。

list1（全12件）

list2（全9件）

list3（全5件）

解説

では、jQueryのコードを下記の4つに分けて解説していきます。

①初期表示数と追加表示数の設定
②初期表示数以降のリスト内容を非表示に
③初期表示数以下であればMoreボタンを非表示
④Moreボタンクリックで指定数表示

①初期表示数と追加表示数の設定

下記コードでは、最初に表示しておくリスト内容の数と、ボタンクリックで表示する件数を定数として定義しています。

const init = 6  //初期表示数
const more = 3  //追加表示数

②初期表示数以降のリスト内容を非表示に

下記のコードで初期表示数以降のリスト内容を非表示にしています。
セレクタ：nth-child(n+m)でm番目以降（ただしm番目を含む）と絞り込むことができます。

initは上記で6としているので、init+1で7番目から先のリスト内容を取得して、それをhide()で非表示にするという形になります。

$(".more-list li:nth-child(n+" + (init+1) + ")").hide()

③初期表示数以下であればMoreボタンを非表示

リスト内容の数が初期表示数より少なければMoreボタンはいらないので、下記のコードで非表示にしています。

filter関数を使用して、liタグがinit(初期表示数)よりすくないリストだけ取得して、その中のMoreボタンをhide()で非表示にしています。

$(".more-list").filter(function(){
    return $(this).find("li").length <= init
}).find(".more-btn").hide()

④Moreボタンクリックで指定数表示

メインのボタンクリックで指定件数ずつ表示する部分は下記のコードになります。

2行目でクリックされたボタンのリストを取得して、3行目で非表示のリストの0~追加表示数(more)のリスト内容をスライド表示させています。
5~7行目で非表示のリスト内容が0になったらMoreボタンを非表示にしています。

$(".more-btn").on("click",function(){
    let this_list = $(this).closest(".more-list")
    this_list.find("li:hidden").slice(0,more).slideToggle()

    if(this_list.find("li:hidden").length == 0){
        $(this).fadeOut()
    }
})

ソースコード全文

最後にコードを全文載せておきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<style>
    .more-list{
        margin: 0 0 30px;
        max-width: 500px;
    }
    .more-list ul{
        display: flex;
        flex-wrap: wrap;
        padding-inline-start: 0;
    }
    .more-list li{
        width: 32%;
        height: 60px;
        background-color: #BDBDBD;
        list-style: none;
        margin: 0 0 10px;
    }
    .more-list li:nth-child(3n-1){
        margin: 0 1%;
    }
    .more-btn{
        background-color:black;
        color: #fff;
        padding: 10px;
        margin: 0 auto;
        width: 200px;
        text-align:center;
    }
    .more-btn:hover{
        cursor: pointer;
    }
</style>

list1（全12件）
<div class="more-list">
    <ul>
        <li>1</li> <li>2</li> <li>3</li>
        <li>4</li> <li>5</li> <li>6</li>
        <li>7</li> <li>8</li> <li>9</li>
        <li>10</li> <li>11</li> <li>12</li>
    </ul>
    <p class="more-btn">More</p>
</div>


list2（全9件）
<div class="more-list">
    <ul>
        <li>1</li> <li>2</li> <li>3</li>
        <li>4</li> <li>5</li> <li>6</li>
        <li>7</li> <li>8</li> <li>9</li>
    </ul>
    <p class="more-btn">More</p>
</div>

list3（全5件）
<div class="more-list">
    <ul>
        <li>1</li> <li>2</li> <li>3</li>
        <li>4</li> <li>5</li> 
    </ul>
    <p class="more-btn">More</p>
</div>


<script>
    const init = 6  //初期表示数
    const more = 3  //追加表示数

    // 初期表示数以降のリストを非表示に
    $(".more-list li:nth-child(n+" + (init+1) + ")").hide()

    //初期表示数以下であればMoreボタンを非表示
    $(".more-list").filter(function(){
        return $(this).find("li").length <= init
    }).find(".more-btn").hide()    

    // Moreボタンクリックで指定数表示
    $(".more-btn").on("click",function(){
        let this_list = $(this).closest(".more-list")
        this_list.find("li:hidden").slice(0,more).slideToggle()

        if(this_list.find("li:hidden").length == 0){
            $(this).fadeOut()
        }
    })
</script>

以上、もっと見るボタンでn件ずつ表示するリストをjQueryで作成する方法でした。