2017年3月29日

”もっと見る” をクリックして続きを表示

”もっと見る” をクリック(タップ)して続きを表示する方法を紹介します。

HTML

補足

  • ul 要素に show-more クラスを付けます。
  • li 要素に 表示する内容を記述します。
  • span 要素の next クラスで続きを表示するようにします。
  • span 要素の close クラスで表示された続きを閉じるようにしています。

jQuery

補足

  • next クラスがクリックされたら、自身を非表示にして、直後の li 要素を表示します。
  • close クラスがクリックされたら、最初の li 要素以外を非表示にして、すべての next クラスを表示状態に戻しています。

CSS

補足

  • show-more クラスの最初の li 要素以外を非表示にしています。
  • next クラスと close クラスのスタイルを設定しています。

サンプル