"続きを表示"をクリックして、指定した数だけリスト項目を表示する。

最初にリスト項目を全て表示しないで、"続きを表示" をクリックすると、指定した数だけ続きのリスト項目を表示する方法。

デモページを表示

CSS

補足

• 2行目：リスト項目を非表示にしておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 23行目以降：最初に指定した項目数だけは表示しておくために設定。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 1行目：ul 要素にデータ属性 data-show-list を付加し、最初と "続きを表示" をクリックした時に表示するリスト項目の個数を指定する。