こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

様々なWEBサイトを見ていると「もっと見るボタン」という機能をよく見かけます。このボタンは、最初から全文を表示してしまうとページのスクロール量が多くなり、閲覧者が途中で離脱してしまうことを防ぐためのものです。また、このボタンの存在によってユーザーは目的の記事をより簡単に見つけることができるというメリットもあります。この記事では「もっと見るボタン」の実装方法について紹介します。

「もっと見るボタン」の実装する方法（jQueryを使用）

コンテンツは、最初から表示したい部分と「もっと見るボタン」を押した後に表示される部分の2つに分けられます。「もっと見るボタン」を押すと、最初は非表示だったコンテンツが表示されます。

このサンプルでは、「もっと見るボタン」を押すと非表示だったコンテンツが表示され、その際ボタンは「閉じるボタン」に切り替わります。そして「閉じるボタン」を押すと、コンテンツは再び非表示となり、ボタンは「もっと見るボタン」に戻ります。

HTML・CSS・jQueryのコードはそれぞれ以下となります。

<p class="default-view">ここのテキストは最初から表示されています。ここのテキストは最初から表示されています。ここのテキストは最初から表示されています。</p>
<p class="hidden-view">ここのテキストは「もっと見るボタン」を押した後に表示されます。ここのテキストは「もっと見るボタン」を押した後に表示されます。ここのテキストは「もっと見るボタン」を押した後に表示されます。ここのテキストは「もっと見るボタン」を押した後に表示されます。</p>
<button class="button"></button>

.hidden-view{
    display: none;
}
.hidden-view.open{
    display: block;
}
.button::before{
    content: "もっと見る";
}
.hidden-view.open + .button::before{
    content: "閉じる";
}

$('.button').on('click',function(){
    $('.hidden-view').toggleClass('open');
});

実装サンプルは以下になります。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

もっと見るボタンを実装する方法（CSSのみで実装）

上の例では「もっと見るボタン」の実装にjQueryを使用しました。しかし、実はjQueryを使わなくても、CSSのみでこのボタンを実装することができます。次に、jQueryを使用せずにCSSだけで「もっと見るボタン」を実装する方法を紹介いたします。

<input type="checkbox" id="trigger">
<p class="default-view">ここのテキストは最初から表示されています。ここのテキストは最初から表示されています。ここのテキストは最初から表示されています。</p>
<p class="hidden-view">ここのテキストは「もっと見るボタン」を押した後に表示されます。ここのテキストは「もっと見るボタン」を押した後に表示されます。ここのテキストは「もっと見るボタン」を押した後に表示されます。ここのテキストは「もっと見るボタン」を押した後に表示されます。</p>
<label class="button" for="trigger"></label>

チェックボックスのid値とlabelのfor値を揃える「もっと見るボタン」をCSSのみで実装する際、チェックボックスのid値とlabelのfor値を一致させることが必要です。これにより、ボックス下部に表示される「もっと見るボタン」をチェックボックスとして機能させることができます。1ページに複数の「もっと見るボタン」を設置する場合、各ボタンのid値とlabelのfor値が正しくマッチしているか確認することが特に重要です。

.hidden-view{
    display: none;
}
.button::before{
    content: "もっと見る";
}
input[type="checkbox"]#trigger{
    display: none;
}
input[type="checkbox"]#trigger:checked ~ .hidden-view{
    display: block;
}
input[type="checkbox"]#trigger:checked ~ .button::before{
    content: "閉じる";
}

実装サンプルは以下になります。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

チェックボックスにチェックが入ると、CSSの記述を変更することで「もっと見るボタン」の動作を再現できます。これにより、jQueryを使用せずにCSSのみでボタンの実装が可能となります。

リストやブログ等を指定した個数ずつ表示するもっと見るボタンの実装方法

この例では、「もっと見るボタン」を押すたびに、指定した数のリストやコンテンツが表示されます。具体的には、一度に2個の項目が追加表示され、全ての項目を表示し終えたら「もっと見るボタン」は非表示となります。

HTML・CSS・jQueryのコードはそれぞれ以下となります。

<ul class="list">
    <li>【テクニック】CSSでもっと見るボタンを実装する方法1</li>
    <li>【テクニック】CSSでもっと見るボタンを実装する方法2</li>
    <li>【テクニック】CSSでもっと見るボタンを実装する方法3</li>
    <li>【テクニック】CSSでもっと見るボタンを実装する方法4</li>
    <li>【テクニック】CSSでもっと見るボタンを実装する方法5</li>
    <li>【テクニック】CSSでもっと見るボタンを実装する方法6</li>
    <li>【テクニック】CSSでもっと見るボタンを実装する方法7</li>
    <li>【テクニック】CSSでもっと見るボタンを実装する方法8</li>
    <li>【テクニック】CSSでもっと見るボタンを実装する方法9</li>
    <li>【テクニック】CSSでもっと見るボタンを実装する方法10</li>
</ul>
<button class="button">もっと見る</button>

.list li.hidden {
    opacity: 0;
    height: 0;
    margin: 0;
}

var moreNum = 2;
$('.list li:nth-child(n + ' + (moreNum + 1) + ')').addClass('hidden');
$('.button').on('click', function() {
    $('.list li.hidden').slice(0, moreNum).removeClass('hidden');
    if ($('.list li.hidden').length == 0) {
        $('.button').fadeOut();
    }
});

実装サンプルは以下になります。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

解説

最初の●件以外を非表示にする

以下の方法では、最初の●個の要素を除いて、それ以降の要素を非表示にします。これは、CSSの擬似クラス：nth-childを使用して、●個目より後の要素に特定のCSSクラスを追加し、それを非表示に設定することで実現しています。

$('.list li:nth-child(n + ' + (moreNum + 1) + ')').addClass('hidden');

「もっと見るボタン」をクリックしたら、非表示になっている項目の先頭から2件表示する

$('.list li.is-hidden').slice(0, moreNum).removeClass('hidden');

非表示の要素にはhiddenクラスが付与されます。このクラスを利用して、現在表示中の要素が何番目までかを判別することができます。
特定の要素までを取得するために、配列のsliceメソッドメソッドを使用します。具体的には、sliceは配列の0番目から2番目までの要素をコピーし、それを新しい配列として返すメソッドです。

全部表示したら「もっと見るボタン」を非表示にする

if ($('.list li.hidden').length == 0) {
  $('.button').fadeOut();
}

「もっと見るボタン」のクリック処理の最後に、hiddenクラスが付与されている要素の数を確認します。もし、その数が0であれば、それは全ての項目が表示されていると判断します。その場合、「もっと見るボタン」は非表示に変更されます。

まとめ

「もっと見るボタン」はWEBサイトでも使用する頻度は高いテクニックになります。作り方を確実に覚えておきたいですね。