タイトルにある通り、合計30件ある記事を、最初に10件表示された状態にしておき、「もっと見る」のボタンを押すと、10件ずつ表示されるJavaScriptを実装していきます。
もちろん、合計記事数や、最初に何件表示させておくか、何件ずつ表示させるかなどは、jsで操作できます。
目次
完成のイメージ
まずは、完成イメージから。
See the Pen Untitled by わい (@y_programing) on CodePen.
該当のコード一覧
細かいコードはこちら。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>記事一覧の展開</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<article>
<a href="">
<h2>タイトル1</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル2</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル3</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル4</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル5</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル6</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル7</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル8</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル9</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル10</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル11</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル12</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル13</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル14</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル15</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル16</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル17</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル18</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル19</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル20</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル21</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル22</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル23</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル24</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル25</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル26</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル27</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル28</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル29</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
<li>
<article>
<a href="">
<h2>タイトル30</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
</ul>
<button class="read-more">もっと見る</button>
</div>
</body>
</html>今回は30記事ある想定ですが、ここまで長くなくてもいいですw
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
color: #333;
text-decoration: none;
}
.container {
margin: 20px 0;
}
ul {
list-style: none;
}
.read-more {
border: none;
background: red;
color: #fff;
padding: 10px;
}
button {
margin: 10px;
}JavaScript
var listContents = document.querySelectorAll(".container li").length;
document.querySelectorAll(".container").forEach(function(detailList) {
var Num = 10;
detailList.querySelector('.read-more').style.display = 'block';
detailList.querySelectorAll("li").forEach(function(li, index) {
if (index >= Num) {
li.style.display = 'none';
}
});
detailList.querySelector('.read-more').addEventListener('click', function() {
Num += 10;
detailList.querySelectorAll("li").forEach(function(li, index) {
if (index < Num) {
li.style.display = 'list-item';
}
});
if (listContents <= Num) {
detailList.querySelector('.read-more').style.display = 'none';
}
});
});基本は
HTML
<div>
<ul>
<li>
<article>
<a href="">
<h2>タイトル</h2>
<p>テキスト</p>
</a>
</article>
<hr>
</li>
</ul>
<button>もっと見る</button>
</div>の形で、ulの中のliタグ（articleタグを）を増やしているだけです。
JavaScriptのポイント解説
1. 初期表示件数と追加件数の設定
コードの 3 行目にある以下の部分で、最初に表示する件数を設定しています。
JavaScript
var Num = 10;11行目の
JavaScript
Num += 10;は、ボタンを押した際に、いくつずつ表示するかを設定できます。
2. 表示・非表示の切り替えロジック
JavaScript
detailList.querySelector('.read-more').style.display = 'block';
detailList.querySelectorAll("li").forEach(function(li, index) {
if (index >= Num) {
li.style.display = 'none';
}
});
detailList.querySelector('.read-more').addEventListener('click', function() {
Num += 10;
detailList.querySelectorAll("li").forEach(function(li, index) {
if (index < Num) {
li.style.display = 'list-item';
}
});
if (listContents <= Num) {
detailList.querySelector('.read-more').style.display = 'none';
}
});メインの処理では以下の流れで要素を操作しています。
- 初期表示:
index >= Num（0始まりのインデックスで10以上）の要素にdisplay = 'none'を付与して隠します。 - クリック時: ボタンが押されるたびに
Numを10ずつ増やし、index < Numの条件に当てはまる要素のdisplayを'list-item'（liタグ本来の表示形式）に戻して表示領域を広げます。 - ボタンの非表示判定:
listContents <= Numになったタイミング（＝最後の記事まで表示しきった状態）で、「もっと見る」ボタン自体をdisplay = 'none'で消去します。
💡 ちょっとしたワンポイント
li要素を表示状態に戻す際、display = 'block'ではなくdisplay = 'list-item'を指定することで、リスト要素本来のブラウザ表示スタイルを崩さずに再表示させることができます。
さいごに
実務の制作現場でも、「最初は要素数を抑えてページをスッキリ見せたい」「Pagination（ページネーション）を作るほどではないけれど追加読み込みをさせたい」という場面で「もっと見る」ボタンは頻繁に使われます。
ライブラリを使わず数行のVanilla JS（純粋なJavaScript）だけでサクッと実装できるので、ぜひご自身のサイトや案件で試してみてください！
コメント