2021年10月15日、Googleのスマホでの検索結果に「無限スクロール」を実装すると発表がありました。
そんな無限スクロールとは異なり旧来の方法になりますが、この記事でのスニペットは、ググった時の検索結果のようなものを最初は一部表示させ、それ以降の内容については「もっと見る」で少しずつ表示させます。
非同期でデータを取得する方法ではないので、実装は簡単です。
この記事では、そんなボタンクリックで要素を展開するjQueryのスニペットについて解説します。
目次
実装のデザインサンプル
早速、実装のサンプルです。
最初は8件表示されている状態ですが、下部にある「もっと見る」ボタンをクリックすると、コンテンツがさらに表示されます。
最終的に全24件が表示されると、「もっと見る」ボタンは消えます。
- 001
- 002
- 003
- 004
- 005
- 006
- 007
- 008
- 009
- 010
- 011
- 012
- 013
- 014
- 015
- 016
- 017
- 018
- 019
- 020
- 021
- 022
- 023
- 024
ページは遷移せず、そのページのままコンテンツを追加で表示されます。
実装の方法と手順
それでは、実装の方法と手順について解説します。
jQuery本体の組み込みが必要です。
jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下の記事を参考にして、jQuery本体をHTMLファイルに書き込みましょう。
関連記事 jQueryのインストール方法
設置したい場所に以下のHTMLを設置します。
「もっと見る」ボタンで表示される要素はli タグで、以下のコードは24個ですが、liタグの個数やその中は自由に変更してOKです。
<div class="container">
<ul class="list">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
<li>015</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
<li>020</li>
<li>021</li>
<li>022</li>
<li>023</li>
<li>024</li>
</ul>
<div class="more">
<button>もっと見る</button>
</div>
</div>HTMLの設置が完了したら、次にCSSをコピペします。
.container {
width: 100%;
margin: 0 auto;
}
.container .list {
flex-wrap: wrap;
display: flex;
list-style: none;
padding: 0;
border: none;
justify-content: space-between;
}
.list li {
box-sizing: border-box;
text-align: center;
background: #ebfcfe;
padding: 10px;
height: auto;
transition: all 0.4s ease 0s;
width: 23%;
margin-bottom: 20px;
color: #6bb6ff;
font-weight: 500;
}
.list li.is-hidden {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0 10px;
padding: 0;
}
.more {
text-align: center;
margin-top: 20px;
}
.more button {
background-color: #6bb6ff;
border: none;
cursor: pointer;
outline: none;
color: #fff;
padding: 0;
line-height: 40px;
width: 180px;
border-radius: 20px;
box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
transition: 0.3s ease-in-out;
}
.more button:hover {
background: #FFF;
color: #6bb6ff;
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 25%);
transform: translateY(-4px);
}最後に、jQueryのコードを<body>〜</body> のクロージングタグ直前に記述します。
var show = 8; //最初に表示する件数
var num = 4; //もっと見るで表示する件数
var contents = '.list li'; // 対象のlist
$(contents + ':nth-child(n + ' + (show + 1) + ')').addClass('is-hidden');
$('.more').on('click', function () {
$(contents + '.is-hidden').slice(0, num).removeClass('is-hidden');
if ($(contents + '.is-hidden').length == 0) {
$('.more').fadeOut();
}
});これで完成です！
コピペ用コード一式
上記でそれぞれ出てきたコードと同じですが、コピペ用コード一式です。
コードを表示する
<div class="container">
<ul class="list">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
<li>015</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
<li>020</li>
<li>021</li>
<li>022</li>
<li>023</li>
<li>024</li>
</ul>
<div class="more">
<button>もっと見る</button>
</div>
</div>.container {
width: 100%;
margin: 0 auto;
}
.container .list {
flex-wrap: wrap;
display: flex;
list-style: none;
padding: 0;
border: none;
justify-content: space-between;
}
.list li {
box-sizing: border-box;
text-align: center;
background: #ebfcfe;
padding: 10px;
height: auto;
transition: all 0.4s ease 0s;
width: 23%;
margin-bottom: 20px;
color: #6bb6ff;
font-weight: 500;
}
.list li.is-hidden {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0 10px;
padding: 0;
}
.more {
text-align: center;
margin-top: 20px;
}
.more button {
background-color: #6bb6ff;
border: none;
cursor: pointer;
outline: none;
color: #fff;
padding: 0;
line-height: 40px;
width: 180px;
border-radius: 20px;
box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
transition: 0.3s ease-in-out;
}
.more button:hover {
background: #FFF;
color: #6bb6ff;
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 25%);
transform: translateY(-4px);
}var show = 8; //最初に表示する件数
var num = 4; //もっと見るで表示する件数
var contents = '.list li'; // 対象のlist
$(contents + ':nth-child(n + ' + (show + 1) + ')').addClass('is-hidden');
$('.more').on('click', function () {
$(contents + '.is-hidden').slice(0, num).removeClass('is-hidden');
if ($(contents + '.is-hidden').length == 0) {
$('.more').fadeOut();
}
});ざっくりとしたコードの解説
ざっくりとしてますが、コードの解説です。
HTML：li のリスト
ul class="list" の中にあるliタグが展開される要素の対象で、コピペ用のコードでは 001〜024 の数字をいれています。
ここの数字部分を、例えば以下のような aタグにしたりと、自由に記述することが可能です。
<div class="container">
<ul class="list">
<li><a href="リンクURL">テキスト</a></li>
・・・
<li><a href="リンクURL">テキスト</a></li></ul>
<div class="more">
<button>もっと見る</button>
</div>
</div>後述の、jQueryで指定した最初に表示する件数 以外のli タグにclassで.is-hidden のclassが付与された状態で表示されます。
そして、「もっと見る」の .moreのclassが付いたボタンをクリックすることで、li に付いていた.is-hiddenのclassが解除されます。
jQuery：「最初に表示する件数」と「もっと見るで表示する件数」
コードのコメントにある通り、冒頭のvarで変数を定義しています。
var show = 8; //最初に表示する件数
var num = 4; //もっと見るで表示する件数
それぞれ件数は自由に設定できますが、出力後のliの並べ方はCSSで整えましょう。
ちなみにこの記事でのliの並びは、flexboxを使って4つ並びにしています。
