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

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

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

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

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

今回はマークアップでもよく使用する、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)からさまざまな要素を取得するとこができますよ😊

parents() 先祖要素(全ての親要素)
parent() 親要素(一つ上の親要素)
prev() 前の要素(兄、前要素)
prevAll() 全ての兄、前要素
next() 次の要素(弟、後要素)
nextAll() 全ての弟、後要素
siblings() 全ての兄弟、前後要素
children() 子要素(孫要素は対象外)
 

サイト制作カテゴリの最新記事