ブログBlog

HOME
ブログ
CSS
続きを表示する｢もっと見る｣ボタンの実装

2022年11月29日 / 最終更新日時 : 2022年11月29日 info@rishuntrading.co.jp

続きを表示する｢もっと見る｣ボタンの実装

今回は、データをリスト表示する際に、途中まで表示し以降は、｢もっと見る｣ボタンを押下する事で見る事ができるようにするボタン｢もっと見る｣ボタンの実装方法について記述します。

実際の実装例
実際のソース
まとめ

実際の実装例

こんな感じのものです。｢—もっと見る—｣ボタンを押下すると、リストを5個づつ表示していきます。

item1
item2
item3
item4
item5
item6
item7
item8
item9
item10
item11
item12
item13
item14
item15
item16
item17
item18
item19
item20

実際のソース

HTML/CSSの文

<style>
.list-data{
    opacity: 1;
}
.list-data.is-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
}
.list-btn {
    margin: 20px 0;
}
.list-btn.is-btn-hidden{
  display:none;
}
.list-btn button {
    color:#333;
    background:transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    height: 32px;
    line-height: 32px;
    width: 200px;
    transition:all 0.3s;
}
.list-btn button:hover {
    opacity:0.6;
}
</style>
<ul class="list">
<li class="list-data">item1</li>
<li class="list-data">item2</li>
<li class="list-data">item3</li>
<li class="list-data">item4</li>
<li class="list-data">item5</li>
<li class="list-data">item6</li>
<li class="list-data">item7</li>
<li class="list-data">item8</li>
<li class="list-data">item9</li>
<li class="list-data">item10</li>
<li class="list-data">item11</li>
<li class="list-data">item12</li>
<li class="list-data">item13</li>
<li class="list-data">item14</li>
<li class="list-data">item15</li>
<li class="list-data">item16</li>
<li class="list-data">item17</li>
<li class="list-data">item18</li>
<li class="list-data">item19</li>
<li class="list-data">item20</li>
</ul>
<div class="list-btn">
    <button>--- もっと見る ---</button>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

<style>

.list-data{

opacity: 1;

}

.list-data.is-hidden {

opacity: 0;

height: 0;

margin: 0;

}

.list-btn {

margin: 20px 0;

}

.list-btn.is-btn-hidden{

display:none;

}

.list-btn button {

color:#333;

background:transparent;

border: none;

cursor: pointer;

outline: none;

padding: 0;

height: 32px;

line-height: 32px;

width: 200px;

transition:all 0.3s;

}

.list-btn button:hover {

opacity:0.6;

}

</style>

</ul>

<button>--- もっと見る ---</button>

</div>

初期表示状態とボタン押下時の処理はjQueryで実装しています。

/* 表示リスト数 */
var moreNumber = 5;

/* 初期設定(表示リスト以外は非表示にする) */
jQuery('.list-data:nth-child(n + ' + (moreNumber + 1) + ')').addClass('is-hidden');

/* 全リスト表示時「もっとみる」ボタンをフェードアウト */
jQuery('.list-btn').on('click', function() {
  jQuery('.list-data.is-hidden').slice(0, moreNumber).removeClass('is-hidden');
  if (jQuery('.list-data.is-hidden').length == 0) {
    jQuery('.list-btn').fadeOut();
  } 
});

/* リスト数が表示リスト数以下の時は「もっとみる」ボタンは非表示 */
jQuery(function() {
  var list = jQuery(".list li").length;  
    if (list < moreNumber) {
      jQuery('.list-btn').addClass('is-btn-hidden');
  }
});

1

2

3

4

5

6

7

8

9

10

11

12