ボタン押下で要素の表示・非表示・ボタンの文言変更要素の数が少ないときはボタン非表示（CSS不要、jQueryのみ）

案件で実装したものメモ。

調べると出てくるのが、cssでis-hide等のクラスをつけて、display:none;にするパターンのやつが多いと思うのですが、jsもしくはjQueryで完結させたかったのでそのコードを書いてます。

要件としては

最初は4件表示
ボタンをクリックすると4件ずつ追加で要素が表示される
要素は後から増やす予定なので、運用開始時は4件ないかも→その場合はボタンごと非表示
最後の要素まで表示したらボタンの文言はCLOSEになって最初の4件表示に戻る

という感じです。

では早速行ってみましょう。

まずはコードから

See the Pen Untitled by 東野江里 (@anyxfbuk-the-scripter) on CodePen.

動きとしてはこんな感じのを想定しています。

解説

html

<ul class="list">
  <li class="list-item">リスト①</li>
  <li class="list-item">リスト②</li>
  <li class="list-item">リスト③</li>
  <li class="list-item">リスト④</li>
  <li class="list-item">リスト⑤</li>
  <li class="list-item">リスト⑥</li>
  <li class="list-item">リスト⑦</li>
  <li class="list-item">リスト⑧</li>
  <li class="list-item">リスト⑨</li>
  <li class="list-item">リスト⑩</li>
</ul>
<button type="button" class="more">VIEW MORE</button>

特筆すべきことはないですが、表示・非表示をする要素にはすべて同じクラスをつけること（同じクラスがついていればliでなくdivとか他のブロックでも全く問題ないです）と、要素の階層をそろえることだけ必要です。

ボタンにはmoreクラスをつけています。

JavaScript

初期設定

var show = 4;
var num = 4;
var contents = '.list-item'; // 対象のlist

show: 最初に表示するリストアイテムの数（4つ）。
num: ボタンをクリックするたびに追加表示するリストアイテムの数（4つ）。
contents: 操作対象となるリストアイテムのクラス名（今回は.list-item）。

初期状態でリストアイテムを表示/非表示に設定

$(contents + ':nth-child(n + ' + (show + 1) + ')').hide();

nth-child セレクタを使って、showで指定された数（4つ）以降のリストアイテムを非表示にしています。この場合は、5番目以降（n + 5）のアイテムが隠されます。

if ($(contents).length <= show) {
  $('.more').css('display', 'none');
}

リストアイテムの総数が show の数（今回は4つ）以下の場合、VIEW MORE ボタンを非表示にします。

ボタンの状態を更新する関数

function updateButtonState() {
  if ($(contents + ':hidden').length == 0) {
    $('.more').text('CLOSE').addClass('close');
  } else {
    $('.more').text('VIEW MORE').removeClass('close');
  }
}

ストアイテムが全て表示されている場合、ボタンのテキストを CLOSE に変更し、クラス close を追加します。
まだ非表示のアイテムがある場合は、ボタンのテキストを VIEW MORE に戻し、close クラスを削除します。

今回は記載していないですが、このcloseクラスをもとにすれば、ボタンのスタイルの変更も可能です。

$(function(){
    updateButtonState();
});

ページが読み込まれた際に、ボタンの状態を初期化します。

ボタンクリックイベント

$('.more').on('click', function () {
  if ($(this).text() === 'CLOSE') {
    // 最初の4件以外を隠す
    $(contents + ':gt(' + (show - 1) + ')').slideUp();
    $(this).text('VIEW MORE').removeClass('close');
  } else {
    // 追加で4件表示
    $(contents + ':hidden').slice(0, num).slideDown();
    updateButtonState();
  }
});

ボタンがクリックされたときに処理を行います。

ボタンのテキストが CLOSE の場合、最初の4つ以外のリストアイテムを非表示にし、ボタンのテキストを VIEW MORE に変更、close クラスを削除します。

ボタンのテキストが VIEW MORE の場合、隠れているリストアイテムのうち最初の4つを表示します。その後、updateButtonState 関数でボタンの状態を更新します。

slideUp()やslideDown()を使用しているので動きも滑らかです。

流れのまとめ

ページ読み込み時、最初の4つのリストアイテムだけが表示されます。
ユーザーが VIEW MORE ボタンをクリックすると、次の4つが表示されます。
全てのリストアイテムが表示されると、ボタンのテキストが CLOSE に変わります。
再度 CLOSE をクリックすると、最初の4つ以外のリストアイテムが非表示になり、ボタンが VIEW MORE に戻ります。

まとめ

今回はボタンで要素を表示・非表示する実装をjQueryで対応しました。

ぜひ使ってみてください。

もしわからないことあれば質問ください！

記事にしてほしい・解説してほしい内容のリクエストもお待ちしています。

ボタン押下で要素の表示・非表示・ボタンの文言変更 要素の数が少ないときはボタン非表示（CSS不要、jQueryのみ）