リストの一定以上から非表示にしてもっと見るリンクで表示させる

リストの一定以上から非表示にしてもっと見るで表示させる

商品や店舗概要など、リスト項目が多い場合、一定以上を非表示にしてもっと見るで表示させたい時ってありますよね。

コンパクトに主要な要素を表示させたいことが多い、スマホをデザインしている場合によく使われているかと思います。

今回はマークアップでもよく使用する、listタグを使用してこちらのもっと見るリンクを実装してみました。

デフォルト時に特定のclassがついた時のliタグのn番目からを非表示にしておき、もっと見るリンクをクリックした時に特定のclassをなくして非表示指定を該当させないようにしました。

一つのjQueryの指定で、何回も使うことができるので便利です！

デモページはこちら！

DEMO

HTML

<div class="wrapper">
  <ul class="list close">
    <li>ここは表示する</li>
    <li>ここは表示する</li>
    <li>ここは表示する</li>
    <li>ここから非表示にする</li>
    <li>ここから非表示にする</li>
    <li>ここから非表示にする</li>
    <li>ここから非表示にする</li>
    <li>ここから非表示にする</li>
  </ul>
  <p><a href="javascript:void(0)" class="more-link">↓もっと見る</a></p>
</div>
<div class="wrapper">
  <ul class="list close">
    <li>ここは表示する</li>
    <li>ここは表示する</li>
    <li>ここは表示する</li>
    <li>ここから非表示にする</li>
    <li>ここから非表示にする</li>
    <li>ここから非表示にする</li>
    <li>ここから非表示にする</li>
    <li>ここから非表示にする</li>
  </ul>
  <p><a href="javascript:void(0)" class="more-link">↓もっと見る</a></p>
</div>
<div class="wrapper">
  <ul class="list close">
    <li>ここは表示する</li>
    <li>ここは表示する</li>
    <li>ここは表示する</li>
    <li>ここから非表示にする</li>
    <li>ここから非表示にする</li>
    <li>ここから非表示にする</li>
    <li>ここから非表示にする</li>
    <li>ここから非表示にする</li>
  </ul>
  <p><a href="javascript:void(0)" class="more-link">↓もっと見る</a></p>
</div>

同じHTMLで何度も使うことができます。

CSS

.wrapper{
  display: block;
  margin: 30px;
  width: calc(100% - 60px);
}
.list{
  box-sizing: border-box;
  list-style: none;
}
.list li{
  margin-bottom: 5px;
}
.list.close li:nth-child(n + 4){
  display: none;
}

ulタグにclass名closeが付いている時の、liタグの四番目以降をdisplay:none;で非表示にさせています。

class名closeが付いている時のみですので、closeがjQueryで無くなった場合disolay:none;は該当しなくなり、四番目以降のliタグが表示されます。

jQuery

$(function(){
    $(".more-link").on("click", function() {
        $(this).parent('p').prev(".list").removeClass('close');
        $(this).parent('p').hide();
    });
});

$(this)は同じHTMLが複数あり、特定の動作をした時のみ該当させたいときに便利です。

今回の$(this)とは、aタグclass名more-linkのことを指します。

more-linkがクリックした時、$(this)＝more-linkの親要素であるpタグの.prev＝隣接している前の要素＝ulのclass名closeをremoveClass＝class名を無くします。

同時にpタグをhideにしてもっと見るリンクを非表示にします。

prev＝隣接している前の要素を指しますが、prevの他にもさまざまな指定方法があります。

こちらを使用すると、$(this)からさまざまな要素を取得するとこができますよ😊

また、$(this)を起点として以下のようにつなげて指定することもできます！

thisの親要素class名hogehogeの次にある要素クラス名.fugafugaを表示非表示させる。

$(this).parent(“.hogehoge”).next(“.fugafuga”).slide Toggle();