こんちゃっす。菱川と言います。都内でwebでざいんやってます。
サイトとか徘徊してると「続きを読む」みたいなボタンがあってクリックとかタップすると続きが表示されるやつをよく見かけるかと思います。
今回はそれを作ったので僕自身もすぐに引用できるように備忘録として記録しておきます。
まずはデモサイトをみてみましょう↓
「read more」のボタンが矢印の形になっていて、クリックするとテキストが現れると同時に矢印が回転しread moreの文字が消えるというものです。結構オシャレでしょ〜！！！(デモサイトなのでウインドウサイズによって動作中に段落が変わっちゃったりしますがあまり気にしないでください。)
では早速コードを公開したいと思います。
html
解説
headにjQueryを読み込んでいることを前提に書いているのでその辺は省略してます。
クラス「show-text」が常に表示される部分で「hide-text」が隠れる要素になります。buttonで押下するとhide-textが出てくる為にjQueryで処理します。後術。
CSS
解説
pタグはご自由に。「on-click」というクラスはjQueryで使います。hide-textはdisplay: noneにし、ボタンは擬似要素を使って矢印のような形にします。
jQuery
jQueryというととっつきにくいと言う方もいるかもしれませんが、めちゃ簡単です。
たったの6行でしまいです。
解説
ボタン「.readmore」をクリックするとトグルクラスで「on-click」をオンオフ切り替えます。これでボタンにアニメーションがついて、スライドトグルで実際にhide-textが表示されると言う仕組みです。
ここでもう一度サンプルを見てみます。
なかなかシンプルでかっちょいいデザインなのでいろんな業種のwebにぴったりだと思います。
まとめ
いかがでしたでしょうか。jQueryを使うとなると毛嫌いする方も多いのですけど6行だけだったら書けるかな！って気持ちにもなるのではないでしょうか。今でもreadmoreを使うことはよくありますのでご活用していただければと思います。
ちなみにボタンのデザインはCSS触れる人ならどんなデザインにでもできるので色々こねくり回して見てください。
それでは！