【CSS】プラグイン不要!オシャレで簡単に「続きを読む」を実装する方法【Jquery】

テキストの冒頭部分だけを見せておきながら、ユーザーが続きを読みたい時に「続きを読む」をクリックすることで表示させているサイトをたまに見かけますよね。

ユーザー側に余計なスクロールをさせず、読みたい文章だけ選んで表示させる便利な機能です。

その機能をなるべく簡単に、かつCSSで少しデザインにこだわって作ってみました。

ws000059

CSS

JavaScript(Jquery)

デモページはこちら

解説

テキストを入れる要素に、heightを指定し、高さを設定します。

その要素に対して、overflow:y:hiddenも設定し、縦にはみ出た分は非表示にさせます。

そしてその要素の下に「続きを読む」ボタンを設置。

テキストを入れる要素に対して相対的に配置できるように、cssのpotisionを使用しています。

JavaScriptでは、まずJqueryライブラリを読み込みます。

続きを読むがクリックされたら、heightとoverflowの設定を解除し、すべてのテキストが表示される仕組みになってます。

グラデーションを設定し、途切れる間際の文章は透明化させているのがこだわりの一つです。

プラグイン不要で簡単に設置できますので、よかったら参考にしてください。

スポンサーリンク
レクタングル(大)
レクタングル(大)

フォローする

スポンサーリンク
レクタングル(大)