もっと見るボタン

2024年8月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、リストの数が多い時にちょっとずつ表示させる「もっと見るボタン」を実装してみようと思います（英語だとsee moreとかshow moreとかview moreとか言うらしいです）

アコーディオンメニューのようにアニメーションさせたいところです。

全部開くとボタンが消える

参考：RunLand株式会社｜シンプルに実装できる「もっと見る」ボタン

まずはリストとボタンを用意します。

鎌倉幕府の歴代執権にしてみました。

<ul class="kamakura">
  <li>① 北条　時政</li>
  <li>② 北条　義時</li>
  <li>③ 北条　泰時</li>
            ・
            ・
            ・
  <li>⑰ 北条　貞将</li>
</ul>

<button class="more">もっと見る</button>

CSSを設定します。

.kamakura {
  width: 75%;
  margin: auto;
}

.kamakura li {
  opacity: 1;
  list-style: none;
  background-color: transparent;
  margin-top: 10px;
  text-align: center;
  height: 48px;
  line-height: 48px;
  border: 1px solid #32bdeb;
  transition: all 0.4s ease 0s;
}

.kamakura li.is-hidden {
  opacity: 0;
  height: 0;
  margin: 0;
}

スクリプトを記述します。

初期状態で3つ表示させて「もっと見る」を押すごとに3つずつ追加で表示されるようにしてみました。

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

なんかボタンが変だなあ。「もっと見る」の「る」の部分だけ押せない。なぜだろう。

本当はボタンがふわっと消えてほしかったのですが、うまくいきませんね。

「閉じる」に変わる

参考：じゅんぺいブログ｜【jQuery】もっと見るボタンクリックで指定した件数ずつ表示させる方法【サンプル付きで解説】

全部開いたら「もっと見る」が「閉じる」に変わるようにしてみます。

今度は室町幕府の歴代将軍にしてみました。

「もっと見る」ボタンと「閉じる」ボタンを設置します。

<div class="muromachi">
  <ul>
    <li>① 足利　尊氏</li>
    <li>② 足利　義詮</li>
    <li>③ 足利　義満</li>
              ・
              ・
              ・
    <li>⑮ 足利　義昭</li>
  </ul>

  <div class="btn js-btn-more">もっと見る</div>
  <div class="btn js-btn-close">閉じる</div> 
</div>

CSSを設定します。

.muromachi ul {
  width: 75%;
  margin: auto;
}

.muromachi li {
  list-style: none;
  background-color: transparent;
  margin-top: 10px;
  text-align: center;
  width: 100%;
  height: 48px;
  line-height: 48px;
  border: 1px solid #32bdeb;
}

スクリプトを記述します。

$(function () {
  const listItems = $(".muromachi li").length;
  $(".muromachi").each(function () {
    let num = 3,
    closeNum = num - 1;
    $(this).find(".js-btn-more").show();
    $(this).find(".js-btn-close").hide();
    $(this).find("li:not(:lt(" + num + "))").hide();
    $(".js-btn-more").click(function () {
      num += 3;
      $(this).parent().find("li:lt(" + num + ")").slideDown();
      if (listItems <= num) {
        $(".js-btn-more").hide();
        $(".js-btn-close").show();
        $(".js-btn-close").click(function () {
          $(this).parent().find("li:gt(" + closeNum + ")").slideUp();
          $(this).hide();
          $(".js-btn-more").show();
        });
      }
    });
  });
});

一度「閉じる」を押した後にまた「もっと見る」を押すといきなり全部展開されてしまいますが、まあよしとしましょう。

テーブル（表）＋もっと見る

リストではなくテーブルでもできるかどうかやってみました。

最後は江戸幕府の歴代将軍です。

<table class="edo">
  <tr>
    <td>① 徳川　家康</td>
  </tr>
  <tr>
    <td>② 徳川　秀忠</td>
  </tr>
  <tr>
    <td>③ 徳川　家光</td>
  </tr>
           ・
           ・
           ・
  <tr>
    <td>⑮ 徳川　慶喜</td>
  </tr>
</table>
            
<button class="more">もっと見る</button>

CSSで上2つと見た目を似せてみました。

.edo {
  width: 75%;
  margin: auto;
  padding: 2px;
  border-collapse: separate;
  border-spacing: 0px 10px;
}

.edo td {
  padding: 0.5rem;
  text-align: center;
  border: 1px solid #32bdeb;
  transition: all 0.4s ease 0s;
  height: 48px;
  display: table-cell;
}
  
.edo tr.is-hidden {
  opacity: 0;
  height: 0;
  margin: 0;
  display: none;
  transition: all 0.4s ease 0s;
}

trとtdどっちにスタイルを当てたらいいのかさっぱりわかりません。

スクリプトは1番目とほぼ同じです。

var moreNum = 3;
$('.edo tr:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
$('.more').on('click', function() {
  $('.edo tr.is-hidden').slice(0, moreNum).removeClass('is-hidden');
  if ($('.edo tr.is-hidden').length == 0) {
    $('.more').fadeOut();
  }
});

やっぱアニメーションしないかぁ。displayにはtransitionが効かないんでしたね。

参考：codepen｜Show/Hide a table <tr> with animation

テーブルのtrをアニメーションさせる方法があるみたいです。

overflow:hiddenにしてmax-heightを増減させて表示・非表示を切り替える感じでしょうか。

早速CSSを書き換えてみましょう。

.edo td {
  padding: 0.5rem;
  text-align: center;
  display: table-cell;
  border: 1px solid #32bdeb;
  max-height: 48px;
  transition: all 0.4s ease 0s;
}

.edo tr.is-hidden td {
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
  border: none;
  opacity: 0;
  max-height: 0px;
  transition: all 0.4s ease 0s;
}

おいィィィボタンの上の空白ぅぅぅぅ

まとめ

テーブルのアニメーションはあきらめました( ´•̥̥̥ω•̥̥̥`)