項目数の多いリストを途中まで表示

項目数の多いリストをすべて表示するとページが長くなり、スクロールの回数が増えるので、途中まで表示し、続きは "続きを表示" ボタンで表示できるようにする。

デモページを表示

CSS

補足

• show-more クラスをつけた要素に続く兄弟要素を、あらかじめ非表示にしておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• show-more クラスをつけた要素をクリックすると、自分自身を非表示にし、後続する兄弟要素を表示する。
• show-more クラスをつける要素は ul li 要素に限定していないので、連続する div 要素などでも良い。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 最初に表示しておく項目の最後に show-more クラスはつけた要素を置く。