「もっと見る」ボタンのサンプル
ながーいコンテンツを短く折りたたんで、ボタンを押したら表示されるサンプルを作成しました。
ポイントは、最初に表示される要素の高さを全表示の30%にしたところです。
＜検証環境＞
Chrome、Firefox、Edge、スマホ（iphone）
Chrome、Firefox、Edge、スマホ（iphone）
リスト一覧
タイトル1
- リスト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
タイトル2
- リスト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
タイトル3
- リスト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
タイトル4
- リスト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
タイトル5
- リスト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
※テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト