”もっと見る” をクリック(タップ)して続きを表示する方法を紹介します。
HTML
補足
- ul 要素に show-more クラスを付けます。
- li 要素に 表示する内容を記述します。
- span 要素の next クラスで続きを表示するようにします。
- span 要素の close クラスで表示された続きを閉じるようにしています。
jQuery
補足
- next クラスがクリックされたら、自身を非表示にして、直後の li 要素を表示します。
- close クラスがクリックされたら、最初の li 要素以外を非表示にして、すべての next クラスを表示状態に戻しています。
CSS
補足
- show-more クラスの最初の li 要素以外を非表示にしています。
- next クラスと close クラスのスタイルを設定しています。